@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Define custom variables */
:root {
    --font-display: "Inter", sans-serif;
    --breakpoint-3xl: 1920px;
    --color-primary: #FF4D00;
    ;
}

/* Base styles */
html {
    font-family: var(--font-display);
}

body {
    background-color: #fcfbfc;
    overflow-x: hidden;
}


.search-icon {
    position: absolute;
    top: 46%;
    left: 30px;
    transform: translateY(-50%);
    color: #555;
}

.custom-form-input {
    padding: 1.5rem 0.75rem !important;
}

.custom-form-input::placeholder {
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    padding-left: 40px;
}

.order-calculate-box {
    border: 1px solid #616060;
    border-radius: 10px;
    /* padding: 10px; */
}

.order-calculate {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #616060;

}

.order-calculate span {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: middle;
    color: black;
}

.order-calculate-box-content {
    color: black;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;

}

.order-calculate-box-content span {
font-weight: 400;
font-size: 15px;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
}


    .menu-card {
      border-radius: 12px;
      overflow: hidden;
      /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
      background: #fff;
      transition: 0.2s ease-in-out;
    }
    .menu-card:hover {
      transform: scale(1.02);
    }
    .menu-img {
      height: 80px;
      object-fit: cover;
      width: 100%;
    }
    .menu-title {
      font-size: 14px;
      font-weight: 600;
    }
    .price {
      font-size: 13px;
      color: #444;
    }
    .rating {
      position: absolute;
      top: 10px;
      left: 10px;
      background: green;
      color: #fff;
      font-size: 12px;
      border-radius: 6px;
      padding: 2px 6px;
    }
    .order-panel {
      background: #222;
      color: #fff;
      border-radius: 12px;
      padding: 15px;
      height: 100%;
    }
    .order-items {
      max-height: 400px;
      overflow-y: auto;
    }
    .generate-btn {
      background: #ff5a1f;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
      width: 100%;
      padding: 12px;
    }
    .nav-tabs .nav-link.active {
      background: #ff5a1f;
      color: #fff;
    }
    .category-btn {
      border-radius: 20px;
      padding: 5px 24px;
      font-size: 13px;
      margin-right: 8px;
    }
    .custom-button{
        overflow-x: auto;
        border-bottom: 2px solid gray;
    }

    .custom-button button{
        border: 1px solid gray; 
    }
    .btn-warning{
        background-color:  #FF4D00 !important;
        color: white;
    }


     .nav-btn {
      background: #4a7c59;
      color: white;
      border-radius: 8px;
      padding: 10px 21px;
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.2s ease-in-out;
      border: none;
    }
    .nav-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    .nav-btn.active {
      background: #ff5a1f;
    }

    .border-right{
        border-right: 1px solid gray;
    }