:root{
    --modal-bg : #fff;
}

.tk-request__backdrop{
    position : fixed;
    right : 0px;
    top : 0px;
    display : flex;
    height : 100%;
    width : 100%;
    justify-content : center;
    overflow-y : auto;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    font-family: 'shabnam' !important; 
    visibility: hidden;
}

.tk-request__backdrop.active{
    z-index: 999999999999 !important;
    visibility: visible !important;
}

.tk-request__backdrop.active .tk-request{
    transition: all 500ms;
    transform: unset;
    margin: auto;
}

.tk-request{
    width : 320px;
    padding : 0.25rem;
}

@media (min-width: 1024px){

    .tk-request{
        width : 400px;
    }
}

.tk-request{
    background:linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    transform: rotateX(90deg);
}

.tk-request__wrapper{
    display : flex;
    flex-direction : column;
    row-gap : 0.75rem;
    padding-left : 1rem;
    padding-right : 1rem;
    padding-top : 0.75rem;
    padding-bottom : 0.75rem;
}

@media (min-width: 1024px){

    .tk-request__wrapper{
        padding-left : 1.5rem;
        padding-right : 1.5rem;
        padding-top : 1.25rem;
        padding-bottom : 1.25rem;
    }
}

.tk-request__wrapper{
    background-color: var(--modal-bg);
}

.tk-request__header{
    display : flex;
    justify-content : space-between;
}

.tk-request__body{
    display : flex;
    flex-direction : column;
    row-gap : 0.75rem;
}

.tk-request input{
    border-radius : 0px;
    padding-top : 0.5rem;
    padding-bottom : 0.5rem;
    padding-left : 0.5rem;
    padding-right : 0.5rem;
    --tw-shadow : 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored : 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow : var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tk-request input:focus{
    outline : 2px solid transparent;
    outline-offset : 2px;
}

@media (min-width: 1024px){

    .tk-request input{
        padding-top : 0.5rem;
        padding-bottom : 0.5rem;
    }
}

.tk-request input{
    border: 1px solid rgb(212, 199, 199) !important;
    font-family: 'shabnam';
}

.tk-request__footer{
    display : flex;
    flex-direction : column;
}

.tk-request__button{
    background-color: #BF953F;
    font-family: 'shabnam';
    border: unset;
    margin-right : auto;
    display : block;
    width : 77px;
    cursor : pointer;
    padding-left : 0.75rem;
    padding-right : 0.75rem;
    padding-top : 0.5rem;
    padding-bottom : 0.5rem;
    font-size : 13px;
    --tw-text-opacity : 1;
    color : rgb(255 255 255 / var(--tw-text-opacity));
}

.tk-request__button:disabled{
    opacity: 0.5;
}

.tk-request__message{
    height : 0px;
    overflow : hidden;
    font-size : 0.75rem;
    line-height : 1rem;
}

@media (min-width: 1024px){

    .tk-request__message{
        font-size : 0.875rem;
        line-height : 1.25rem;
    }
}

.tk-request__message{
    transition: all 300ms;
}

.message-error{
    font-weight : 700;
    --tw-text-opacity : 1;
    color : rgb(239 68 68 / var(--tw-text-opacity));
}

.message-success{
    font-weight : 700;
    --tw-text-opacity : 1;
    color : rgb(34 197 94 / var(--tw-text-opacity));
}

.tk-request__message.active{
    height : 16px !important;
}
.tk-request__date{
    display : grid;
    grid-template-columns : repeat(12, minmax(0, 1fr));
    -moz-column-gap : 1.25rem;
         column-gap : 1.25rem;
}
.tk-request select{
    display : block;
    width : 100%;
    -webkit-appearance : none;
       -moz-appearance : none;
            appearance : none;
    --tw-bg-opacity : 1;
    background-color : rgb(255 255 255 / var(--tw-bg-opacity));
    padding-left : 1rem;
    padding-right : 1rem;
    padding-top : 0.5rem;
    padding-bottom : 0.5rem;
    font-size : 0.875rem;
    line-height : 1.25rem;
    font-weight : 400;
    --tw-text-opacity : 1;
    color : rgb(55 65 81 / var(--tw-text-opacity));
    border-radius : 0.25rem;
    border-width : 1px;
    border-style : solid;
    --tw-border-opacity : 1;
    border-color : rgb(209 213 219 / var(--tw-border-opacity));
    background-repeat : no-repeat;
    transition-property : color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property : color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property : color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-duration : 150ms;
    transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
}
.tk-request select:focus{
    --tw-border-opacity : 1;
    border-color : rgb(37 99 235 / var(--tw-border-opacity));
    --tw-bg-opacity : 1;
    background-color : rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-text-opacity : 1;
    color : rgb(55 65 81 / var(--tw-text-opacity));
    outline : 2px solid transparent;
    outline-offset : 2px;
}
:root {
  --tk-menus-primary-color: #cca45e;
  --tk-menus-pure-color: white;
  --tk-menus-secondary-color: #404040;
}

.tk-menus {
  font-family: "shabnam";
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {

  .tk-menus {
    padding: 40px;
  }
}

.tk-menus {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.5);
}
.tk-menus__category {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  margin-bottom: 2rem;
}
.tk-menus__category-tab {
  color: var(--tk-menus-pure-color);
  background: var(--tk-menus-secondary-color);
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid var(--tk-menus-primary-color);
  width: 80% !important;
  cursor: pointer;
}
.tk-menus__category-tab.active {
  background: var(--tk-menus-primary-color);
}

.tk-menus__parent {
  display: none;
}

.tk-menus__parent.active {
  display: block !important;
}

.tk-menus__top {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 15px;
       column-gap: 15px;
}

.tk-menus__top-title {
  color: var(--tk-menus-primary-color);
}
.tk-menus__top-title small {
  color: var(--tk-menus-secondary-color);
}
.tk-menus__top-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.tk-menus__title {
  color: var(--tk-menus-primary-color);
  margin-top: 1rem;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  font-size: 18px;
}
.tk-menus__title h5 {
  margin: 0;
}
.tk-menus__title svg {
  width: 25px;
  height: 25px;
  transition: all 500ms;
}
.tk-menus__title svg.open {
  transform: rotate(180deg);
}
.tk-menus__group {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  color: var(--tk-menus-pure-color);
  font-size: 14px;
}
.tk-menus__discount {
  color: var(--tk-menus-primary-color);
}
.tk-menus__group small {
  color: var(--tk-menus-secondary-color);
  font-size: 12px;
}
.tk-menus__item {
  display: flex;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.tk-menus__food-name {
}

.tk-menus__dashed {
  border-bottom: 2px dotted var(--tk-menus-secondary-color);
  flex-grow: 1;
}

.accordion {
  height: 0;
  overflow: hidden;
  transition: all 500ms;
}

.tk-menus__request-button {
  background-color: #00000014;
  border: 1px solid var(--tk-menus-primary-color);
  color: white;
  padding: 5px 14px;
  font-size: 14px;
  width: 130px;
  margin-top: 10px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 5px;
  transition: all 500ms;
}

.tk-menus__request-button:hover {
  background-color: var(--tk-menus-primary-color);
  border: 1px solid #00000014;
}

.tk-menus__top-title > div {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 5px;
       column-gap: 5px;
}
.tk-menus__type {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.5rem;
}
.tk-menus__type-items {
  grid-column: span 6 / span 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
  font-size: 14px;
}
@media (min-width: 768px) {

  .tk-menus__type-items {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 16px;
  }
}
.tk-menus__type-items {
  background: #686868;
  border: 1px solid transparent;
  color: white;
  opacity: .9 ;
  transition: all 500ms;
  cursor: pointer;
}
.tk-menus__type-items.active{
  border: 1px solid var(--tk-menus-primary-color);
  box-shadow: 0 0 10px 0px var(--tk-menus-primary-color);
  opacity: 1;
  background: #1b1b1b;
}
.tk-menus__wrapper{
  display: none;
}
.tk-menus__wrapper.active{
  display: block;
}
.container{
    width: 100%
}
@media (min-width: 640px){
    .container{
        max-width: 640px
    }
}
@media (min-width: 768px){
    .container{
        max-width: 768px
    }
}
@media (min-width: 1024px){
    .container{
        max-width: 1024px
    }
}
@media (min-width: 1280px){
    .container{
        max-width: 1280px
    }
}
@media (min-width: 1536px){
    .container{
        max-width: 1536px
    }
}
.visible{
    visibility: visible
}
.static{
    position: static
}
.fixed{
    position: fixed
}
.relative{
    position: relative
}
.right-0{
    right: 0px
}
.top-0{
    top: 0px
}
.col-span-6{
    grid-column: span 6 / span 6
}
.col-span-12{
    grid-column: span 12 / span 12
}
.col-span-4{
    grid-column: span 4 / span 4
}
.mt-4{
    margin-top: 1rem
}
.mr-auto{
    margin-right: auto
}
.mb-2{
    margin-bottom: 0.5rem
}
.block{
    display: block
}
.inline{
    display: inline
}
.flex{
    display: flex
}
.table{
    display: table
}
.grid{
    display: grid
}
.hidden{
    display: none
}
.h-full{
    height: 100%
}
.h-0{
    height: 0px
}
.h-4{
    height: 1rem
}
.w-full{
    width: 100%
}
.w-\[320px\]{
    width: 320px
}
.w-\[77px\]{
    width: 77px
}
.w-4{
    width: 1rem
}
.flex-grow{
    flex-grow: 1
}
.transform{
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@-webkit-keyframes spin{
    to{
        transform: rotate(360deg)
    }
}
@keyframes spin{
    to{
        transform: rotate(360deg)
    }
}
.animate-spin{
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite
}
.cursor-pointer{
    cursor: pointer
}
.appearance-none{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none
}
.grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr))
}
.flex-col{
    flex-direction: column
}
.items-center{
    align-items: center
}
.justify-start{
    justify-content: flex-start
}
.justify-center{
    justify-content: center
}
.gap-2{
    gap: 0.5rem
}
.gap-x-3{
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem
}
.gap-y-1{
    row-gap: 0.25rem
}
.gap-y-2{
    row-gap: 0.5rem
}
.overflow-y-auto{
    overflow-y: auto
}
.truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.rounded-none{
    border-radius: 0px
}
.rounded{
    border-radius: 0.25rem
}
.border{
    border-width: 1px
}
.border-solid{
    border-style: solid
}
.border-gray-300{
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity))
}
.bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-no-repeat{
    background-repeat: no-repeat
}
.p-1{
    padding: 0.25rem
}
.py-\[30px\]{
    padding-top: 30px;
    padding-bottom: 30px
}
.px-\[20px\]{
    padding-left: 20px;
    padding-right: 20px
}
.py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
.px-4{
    padding-left: 1rem;
    padding-right: 1rem
}
.py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.text-center{
    text-align: center
}
.text-\[18px\]{
    font-size: 18px
}
.text-\[14px\]{
    font-size: 14px
}
.text-xs{
    font-size: 0.75rem;
    line-height: 1rem
}
.text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem
}
.text-base{
    font-size: 1rem;
    line-height: 1.5rem
}
.font-normal{
    font-weight: 400
}
.lowercase{
    text-transform: lowercase
}
.italic{
    font-style: italic
}
.text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.text-red-500{
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity))
}
.text-green-500{
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity))
}
.text-gray-700{
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity))
}
.underline{
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline
}
.opacity-25{
    opacity: 0.25
}
.opacity-75{
    opacity: 0.75
}
.shadow-sm{
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.filter{
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.transition{
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.ease-in-out{
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.placeholder\:text-xs::-moz-placeholder{
    font-size: 0.75rem;
    line-height: 1rem
}
.placeholder\:text-xs:-ms-input-placeholder{
    font-size: 0.75rem;
    line-height: 1rem
}
.placeholder\:text-xs::placeholder{
    font-size: 0.75rem;
    line-height: 1rem
}
.focus\:border-blue-600:focus{
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity))
}
.focus\:bg-white:focus{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.focus\:text-gray-700:focus{
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity))
}
.focus\:outline-none:focus{
    outline: 2px solid transparent;
    outline-offset: 2px
}
@media (min-width: 768px){
    .md\:py-2{
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
    }
}
@media (min-width: 1024px){
    .lg\:w-\[400px\]{
        width: 400px
    }
    .lg\:px-6{
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
    .lg\:py-5{
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }
    .lg\:py-2{
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
    }
    .lg\:text-sm{
        font-size: 0.875rem;
        line-height: 1.25rem
    }
}