/*
 * Generated by Theme Editor
 * Client:    15542
 * Published-By: whacky.dedase@oolio.com
 * Published: 2026-08-05T02:54:03.752Z
 */

/*
 * Generated by Theme Editor
 * Client:    14840
 * Published-By: justin.magallano@oolio.com
 * Published: 2026-07-02T05:46:46.898Z
 */

/*
 * Generated by Theme Editor
 * Client:    14840
 * Published-By: whacky.dedase@oolio.com
 * Published: 2026-06-30T05:06:30.379Z
 */

/*
 * Generated by Theme Editor
 * Client:    14840
 * Published-By: whacky.dedase@oolio.com
 * Published: 2026-06-30T05:02:26.319Z
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Montserrat:wght@400;600;700&display=swap');

:root{
    --primary:#4da29d;
    --primary-soft:#edf6f5;
    --accent-yellow:#f5f403;
    --accent-pink:#d18490;
    --dark:#1f1f1f;
    --light:#ffffff;
}

/* GLOBAL */
body{
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #f8fbfb 0%, #edf6f5 100%);
    color: var(--dark);
    background-position-y:-180px !important;
}


#left-nav{
  overflow:hidden;
  left:-1px;
  
  center{
      display:none;
  }
  
  #store-nav:before{
      content:'';
      left:0;
      top:0;
      width:100%;
      height:100%;
      position:absolute;
  }
  
  #store-nav{
    position:relative;
    padding:1rem;
    height:180px !important;
    background: var(--primary-soft);
  }

  #nav_profile_pic:before{
    content:'';
    position:absolute;
    top:35px;
    left:0;
    width:100%;
    height:100%;
    background:url('./images/logo.png');
    background-repeat:no-repeat;
    background-size:contain !important;
  }

  ul li{
    border:none;
    /* border-bottom: 1px solid var(--tertiary); */
    margin:10px;     
    background:var(--button-text-color) !important;

    a {
      font-weight:500 !important;
      color: #393939 !important;
    }
  }
}


.main-mask {
  backdrop-filter: blur(5px);
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 99;
}

.modal-content{
    border:none !important;
    text-align:center;
}
.modal-header{
  border-bottom:none;
}

.modal-header,
.modal-header .item-icons-container,
.modal-header .item-icons, .modal-title{
     background-color: #fff !important;
}

.modal-title{
    font-weight:600 !important;
}

.menu-item-option-popup{
    margin:0 auto;    
}

.item-description-popup {
    font-weight:400 !important;
}

.input-group-label{
  color: #333333;
  border:none;
  box-shadow:0 3px 6px #0000002b ;
  padding:9px !important;
}

.input-group-label:hover {
    background-color: var(--primary-soft) !important;
    color: var(--dark);
}

.modal-footer input, input:checked+.input-group-labeAl,.modal-deals .modal-header button, .modal-deals .modal-footer button, .modal-deals .modal-body .auto-deal-selection button, .modal-deals .modal-body .deal-modal-body-selection-list button{
    background-color:var(--primary) !important;
    color:#FFF !important;
    font-weight:600 !important; 
}

.btn-primary {
    border-color: var(--primary)  !important;
}


/* HEADINGS */
h1,h2,h3{
    font-family: 'Bebas Neue', sans-serif;
    color:var(--primary) !important;
}

/* NAVBAR */
.navbar .container{
    background: linear-gradient(135deg, var(--primary), #63b7b2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.navbar a{
    color:#fff !important;
    font-weight:500;
    letter-spacing:0.5px;
    position:relative;
}

/* subtle underline animation */
.navbar a::after{
    content:'';
    position:absolute;
    bottom:-4px;
    left:0;
    width:0%;
    height:2px;
    background: var(--accent-yellow);
    transition:0.3s;
}

.navbar a:hover::after{
    width:100%;
}

.navbar .view_cart{
    background: var(--accent-yellow);
    color:#000 !important;
    border-radius:20px;
    padding:6px 14px;
    font-weight:600;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

.desk-top-title{
    font-size:35px !important;
    color: var(--accent-yellow);
    text-shadow:
        1px 0 0 var(--primary),
        1px 0 0 var(--primary),
        1px 0 0 var(--primary),
        2px 0 0 var(--primary);
}



/* MENU BAR */
#menu{
    background: var(--light);
    box-shadow:0 12px 30px rgba(0,0,0,0.06);
    text-align:center;
}

#menu ul li a{
    color:#adadad !important;
    font-weight:600;
    transition: all 0.3s ease;
    background:#fff !important;
            text-shadow:
        2px 2px 0 #ededed,
        2px 2px 0 #ededed,
        2px 2px 0 #ededed,
        2px 2px 0 #ededed;
}

#menu ul li a:hover{
    background: #FFFF!important;
    color: var(--accent-yellow) !important;
    font-weight:800;
    text-shadow:
        -1px -1px 0 var(--primary),
         0px -1px 0 var(--primary),
         1px -1px 0 var(--primary),
        -1px  0px 0 var(--primary),
         1px  0px 0 var(--primary),
        -1px  1px 0 var(--primary),
         0px  1px 0 var(--primary),
         1px  1px 0 var(--primary);
    font-size:21px;
}

#menu-cont > #menu > #menu-ul > li > a.menu-active{
    border-bottom: none !important;
    color: var(--accent-yellow) !important;
    font-weight:800;
    text-shadow:
        -1px -1px 0 var(--primary),
         0px -1px 0 var(--primary),
         1px -1px 0 var(--primary),
        -1px  0px 0 var(--primary),
         1px  0px 0 var(--primary),
        -1px  1px 0 var(--primary),
         0px  1px 0 var(--primary),
         1px  1px 0 var(--primary);
    font-size:21px;
}

.pn-Advancer {
    background: #fff !IMPORTANT;
}

.pn-Advancer_Icon {
    fill:var(--accent-yellow) !important;
}

/* MENU BACKGROUND */
#menu-items, {
    background: linear-gradient(180deg, #edf6f5 0%, #f8fbfb 100%) !important;
}

#menu-items h1{
    color:var(--primary) !important;
}

/* MENU CARDS */
#menu-items ul li.group,
#menu-items ul li.single{
    border:none;
    border-radius:18px;
    background:#fff;
    padding:1.5rem;
    box-shadow:0 12px 30px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position:relative;
    overflow:hidden;
    
}

#menu-items ul li.group:hover,
#menu-items ul li.single:hover{
    box-shadow:0 25px 50px rgba(0,0,0,0.12);
}

/* IMAGE */
.item-thumb{
    min-width:250px;
    min-height:200px !important;
    margin-right: auto !important;
    
    img{
        border-radius:14px;
        transition: transform 0.4s ease;
        width:100% !important;
        min-height:150px !important;
    }
}

.item-block{
    width:100% !important;
}

#menu-items li:hover .item-thumb img{
    transform: scale(1.05);
}


.menu-item #menu_items ul li .visual-tag-label {
    background-color: var(--accent-pink) !important;
}

/* TITLE */
.item-title{
    font-family:'Montserrat', sans-serif;
    font-weight:600 !important;
    font-size:17px !important;
    letter-spacing:0.3px;
}

/* PRICE (make it POP) */
.item-price{
    font-size:24px !important;
    font-weight:700 !important;
    color: var(--primary);
    position:relative;
    width:fit-content;
}

.item-price::after{
    content:'';
    position:absolute;
    width:100%;
    height:6px;
    background: var(--accent-yellow);
    bottom:-4px;
    left:0;
    opacity:0.4;
    border-radius:10px;
}

/* BUTTON FEEL */
button{
    border-radius:25px;
    font-weight:600;
}

button:hover{
    transform: translateY(-2px);
}

@media(max-width:1024px){

    #menu-items{
        background:#fff;    
    }
    
    #menu-items h1{
        font-size:25px !important;
        font-weight:700;
        background:#fff !important;
    }

    #menu-desc-header{
        text-align:center;
    }
    .item-block{
        min-width:100% !important;
    }
    
}

/* MOBILE */
@media(max-width:768px){

    #menu-items ul li.group,
    #menu-items ul li.single{
        margin:12px ;
    }
    .item-thumb {
        float:left !important;    
    }

    .item-price{
        font-size:20px !important;
    }

    .item-block{
        padding-top:10PX;
    }
}

#order-type .method-option h1 {
    font-size: 0; 
}

#order-type .method-option h1::before {
    content: "Dine In";
    font-size: 3.5rem; 
}