/*FONTS------------------------*/

@import url("https://p.typekit.net/p.css?s=1&k=fnx6dqx&ht=tk&f=10306.10307.10308.10309&a=94857187&app=typekit&e=css"); 

@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

 /* Arvo - Regular (400)  */
@font-face {
  font-family: "Arvo";
  src: url("https://fonts.gstatic.com/s/arvo/v20/tDbD2oWUg0MKqScQ7A.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

/* Arvo - Bold (700) */
@font-face {
  font-family: "Arvo";
  src: url("https://fonts.gstatic.com/s/arvo/v20/tDbB2oWUg0MKqSZa7F8gCw.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
} 

.tk-livory {
  font-family: "livory", serif;
}

@font-face {
  font-family: OpenSans;
  src: url(../../css/fonts/opensans/static/OpenSans/OpenSans-Regular.ttf);
}

@font-face{ 
    font-family: "Arvo";
    src: url(https://taptapeat.com/css/fonts/Arvo/Arvo-Bold.ttf);
    src: url(https://taptapeat.com/css/fonts/Arvo/Arvo-Regular.ttf);
}

@font-face {
    font-family: "Archivo";
    src: url(https://taptapeat.com/css/fonts/Archivo_Regular.ttf);
}
/*----------END OF FONTS----------*/

body {
    font-family: "Archivo", sans-serif;
    color: #1f1f1f;
    letter-spacing: 0px;
}

.positive {
    color: #ba9d5c;
}


/* Code for aligning homepage */
#splash {
  text-align: center;
}
/* */


 /* Code for input fields - I.E. quantity num or text in the styling editor */
 /* (Note: as of 11/22/24 !important is required to overide a hard-coded color value when adding a menu item*/
 textarea,
 input[type="text"],
 input[type="password"],
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="date"],
 input[type="month"],
 input[type="time"],
 input[type="week"],
 input[type="number"],
 input[type="email"],
 input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
   color: #222222 !important;
 }
 /* */


/*TOP BAR-------------------------------------*/

/*Code for top bar*/
.bar.bar-dark {
    background-color: #222222;
    border-color: #222222;
}

/*Code for titles on top bar*/
.bar.bar-dark .title {
    font-weight: 600;
    color: #ba9d5c;
    font-size: 22px;
    font-family: "Archivo", sans-serif;
    letter-spacing: 1.5px;
}

/*Code for back button on header (when you click into a menu item)*/
.bar-dark .button.button-clear {
    font-weight: 600;
    color: #ba9d5c;
    font-size: 22px;
    font-family: "Archivo", sans-serif;
}

/*Code for shopping cart button on header*/
.bar-dark .button.button-icon {
    color: #ba9d5c;
}
/*----------*/


/*BOTTOM BAR----------------------------------*/

/*Code for bottom bar*/
.tabs-striped.tabs-dark .tabs {
    background-color: #222222;
    border-bottom: none;
}

/*Code for bottom bar tabs*/
.tab-item .icon {
    color: #ba9d5c;
}

/*Code for bottom bar tabs border when active*/
.tab-item.tab-item-active {
    border-color: #ba9d5c !important;
}

/*Code for font color for bottom bar tabs*/
.tabs-striped.tabs-dark .tab-item.tab-item-active {
    color: #ba9d5c;
}
.tabs .tab-item {
    color: #ba9d5c !important;
}
/*----------*/


/*MENU GROUPS----------------------------------------*/

/*Code for menu boxes*/
.MenuGroup {
    background: #1f1f1f;
}

/*Code for menu group names*/
.menu-group-name {
    color: #ba9d5c;
    font-family: "Arvo";
    font-size: 26px;
    letter-spacing: 1.5px;
}

/*Code for menu group descprtions*/
.menu-group-description {
    color: #ba9d5c;
    font-size: 16px;
    font-family: "Archivo", sans-serif;
    padding-top: 5px;
}

/*Code for arrow on menu box*/
.menu-group-box {
    color: #ba9d5c;
}
/*----------*/

/*MENU PLACEHOLDERS---------------------------------*/

/* Placeholders are the headers things, we use them to order and seperate menu groups */

/* Bad solution for dividers inside of a menugroup
/*this code applies the font color*/
.MenuItem-placeholder .ng-binding {
    color: #1f1f1f;
}
/*this code applies the background*/
.MenuItem-placeholder {
    background-color: #b2b2b2;
}


/*Code for menu group placeholder title and etc*/
.menuGroupPlaceholder {
    color: #1f1f1f;
     font-family: "Arvo";
  font-size: 22px;
  text-underline-offset: 8px;
  border-color: #7e0808;
  text-decoration: underline;
  text-decoration-color: #7e0808;
  text-decoration-thickness: 3px;
}

.hand.MenuItemDescription.dark.menu-group-description.menu-group-placeholder-description.ng-binding {
  color: #1f1f1f;
  font-family: "Archivo", sans-serif;
  font-size: 22px;
  border-color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 3px;
}

/*Code for menu group placeholder descriptions*/
.menu-group-placeholder-description {
    color: #1f1f1f;
    font-size: 15px;
    font-family: "Archivo", sans-serif;
    padding-top: 5px;
    font-weight: 400;
    letter-spacing: 0px;
    padding-left: 20px;
    padding-right: 20px;
}

/*----------*/



/*MENU ITEM-----------------------------------------*/

/*Code for menu item name*/
.menuItemName {
    font-weight: 600;
    font-size: 18px;
    font-family: "Arvo";
    color: #1f1f1f;
}

/*Code for menu item description*/
.MenuItemDescription {
    font-weight: 400;
    font-size: 15px !important; /*(Note: default styling overides font-size, creating a need for !important)*/
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "Archivo", sans-serif;
    color: #535353;

}

/*Code for menu item cost*/
.menu-item-cost {
    font-weight: 600;
    font-size: 16px;
    color: #1f1f1f;
}
/*----------*/


/*MENU ITEM PAGES - BUTTONS-----------------------------*/

/*Code for ASSERTIVE buttons*/
.button.button-assertive {
   background-color: #1f1f1f;
   color: white;
   font-size: 14px;
}
/*When activated*/
.button.button-assertive.activated {
   background-color: #262626; /*different for effect*/
   color: white;
}
/* */


/*Code for ASSERTIVE OUTLINE buttons*/
.button.button-assertive.button-outline {
    border-color: #1f1f1f;
    color: #1f1f1f;
}
/*When activated*/
.button.button-assertive.button-outline.activated {
    background-color: #1f1f1f;
    color: #ffffff;
}
/* */


/*Code for BALANCED buttons*/
.button.button-balanced {
    background-color: #ba9d5c;
}
/*When activated*/
.button.button-balanced.activated {
    background-color:#ba9d5c; /*different for effect*/
    color: #ffffff;
}
/* */


/*Code for BALANCED OUTLINE buttons*/
.button.button-balanced.button-outline {
    border-color: #ba9d5c;
    color:#ba9d5c;
}
/*When activated*/
.button.button-balanced.button-outline.activated {
    background-color: #ba9d5c;
    color:#ffffff;
}
/* */


/*Code for POSITIVE buttons*/
.button.button-positive {
   background-color: #ba9d5c;
}
/*When activated*/
.button.button-positive.activated {
   background-color: #ba9d5c; /*different for effect*/
   color: #ffffff;
}
/* */


/*Code for POSITIVE OUTLINE buttons*/
.button.button-positive.button-outline {
   border-color: #ba9d5c;
   color: #ba9d5c;
}
/*When activated*/
.button.button-positive.button-outline.activated {
   background-color: #ba9d5c;
   color: #ffffff;
}
/* */
/*----------*/


/*MENU ITEM PAGES - MISC-----------------------------*/


/*Code for CHECKBOX before selected*/
.checkbox-square .checkbox-icon:before {
   border-color: #ba9d5c;
}
/*After selected*/
.checkbox input:checked + .checkbox-icon:before {
   border-color: #b2b2b2;
   background: #b2b2b2;
}
/* */


/*NO YES XTRA Buttons*/
.button.button-small.button-stable.button-positive {
   background-color: #ba9d5c;
   color: #fff;
   border-color: #ba9d5c;
}
/* */


/*Code for RADIO BUTTON before selected*/
/* (Note: as of 11/20/24 !important is necessary to overide a !important in the inoic styling) */
.radio-positive .radio-icon:before {
   border-color: #ba9d5c !important;
}
/*After selected (the little dot in the middle)*/
/* (Note: as of 11/20/24 !important is necessary to overide a !important in the inoic styling) */
.radio-positive .radio-icon:after {
   background: #ba9d5c !important;
}
.item-radio input:checked + .radio-content .radio-icon:after {
   -webkit-transform: scale(1);
   transform: scale(1);
}
/* */


/*Code for WHOLE and HALF when selected*/
.circle-positive {
   border-color: #ba9d5c;
   background: #ba9d5c;
}
/*Not selected*/
.circle-negative {
   border-color: #b2b2b2;
}
/* */
/*----------*/


/*CATERING HEADINGS---------------------------------*/

.menu-instructions{
    background: #f1f2f3;
    padding-top:10px;
    padding-bottom: 10px;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .menu-instructions-lobster {
    font-family: "Archivo", sans-serif;
    color: #ba9d5c;
    font-weight: 800px;
    font-size: 30px;
    letter-spacing: 1.5px;
    font-size: 28px;
    padding:6px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .menu-instructions-hind-upper {
    font-family: "Archivo", sans-serif;
    color: #1f1f1f;
    font-size: 20px;
    font-weight: 600px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .menu-instructions-hind-lower{
    font-family: "Archivo", sans-serif;
    font-size: 15px;
    padding: 0px;
    color: #1f1f1f;
    padding-left: 20px;
    padding-right: 20px;
  }

  /*----------*/


  .button.button-balanced {
    background-color: #ba9d5c;
    color: #ffffff;
}

.button.button-balanced:hover {
    background-color: #ba9d5c; /* Example darker shade on hover */
    color: #ffffff;
}

.button.button-energized {
    background-color: #1f1f1f;
    color: #ffffff;
}

.button.button-energized:hover {
    background-color: #383838; /* Example lighter shade on hover */
    color: #ffffff;
}

/*CATERING EVENT PAGES -----------------------------*/
/*Catering Event Page Headings - Event Info - Customer Info - Event Contact*/  
  .event-info-header {
    font-family: Barlow;
    font-size:18px;
    margin-top: 5px;
}

/* Event page styling 8/8/2025 */
.event-info-label {
    font-family: "Archivo", sans-serif;
    font-size:16px;
    color: #201e1f;
  }

/*----------*/