/* 
Davey - 5/13/2025
This is a default styling template for online ordering sites that I made to replace some older CSS code 

I have split the code up into sections:
1. Fonts
2. Top Bar
3. Bottom Bar
4. Menu Groups
5. Menu Group Placeholders
6. Catering Headings
7. Menu Items
8. Menu Item Page - Buttons
9. Menu Item Page - Misc

You can modify this to fit new ordering sites by swaping colors, removing parts and etc.
I will attempt to make this CSS as accessible as possible with comments, 
and im hoping that if we use this by default we can avoid the spaghetti code issue 

This is a tool that helps you change an image's color:
https://codepen.io/sosuke/pen/Pjoqqp

For example this is code I used in billysimsbbq

Code for setting image colors to #f4a52f
.button.button-positive:hover {
color: #000000;
}
.button.button-positive img {
filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(6%) hue-rotate(86deg) brightness(93%) contrast(100%);
}

*/

/*FONTS------------------------*/
/*NOTE: do NOT use absolute paths for font urls*/

/* 
Example of an adobe font

Instead of just including a single @import url, 
ive pasted to contents of the url link to the css document because Mark told me to lol.
(Something about not wanting to rely on a third party)
*/

/*FONTS------------------------*/
/*NOTE: do NOT use absolute paths for font urls*/

@font-face {
  font-family: 'montserrat';
  src: url(https://taptapeat.com/css/fonts/montserrat/static/Montserrat-Black.ttf);
  font-weight: 400;
}
/*----------END OF FONTS----------*/

/* All text that isnt being styled */
body {
  font-family: 'monserrat', sans-serif;
  color: #020f00;
  letter-spacing: 0.5px;
}

/* Site accents */
.positive {
  color: #ff72b5;
}

/* 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: #000000 !important;
}
/* */

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

/*Code for top bar*/
.bar.bar-dark {
  background-color: #154b59;
  border-color: #154b59;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*Code for titles on top bar*/
.bar.bar-dark .title {
  font-weight: 900;
  font-size: 22px;
  font-family: 'monserrat', sans-serif;
  color: #ffffff;
}

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

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

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

/*Code for bottom bar*/
.tabs-striped.tabs-dark .tabs {
  background-color: #154b59;
  border-top: none;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  height: 60px; /*controls how tall the bottom bar is*/
}

/*Tabs font size*/
.tabs-icon-top > .tabs .tab-item {
  font-size: 12px;
  line-height: 24px; /*how close to the image the text is*/
}

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

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

/* Icon turns to a color on hover */
/* .tab-item:hover .icon {
    color: #f40000;
  } */

/* Text turns to a color on hover */
/* .tab-item:hover {
    color: #f40000 !important;
  } */

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

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

/*Code for menu boxes*/
.MenuGroup {
  background: #154b59;
}

/*Code for menu group names*/
.menu-group-name {
  color: #ffffff;
  font-family: 'monserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
}

/*Code for menu group descprtions*/
.menu-group-description {
  color: #caedfc;
  font-family: 'monserrat', sans-serif;
  font-size: 14px;
  padding-top: 5px;
  font-weight: 400;
}

/*Code for arrow on menu box(if icon is wrong try .menu-group-box)*/
.menu-group-icon {
  color: #ff72b5;
}
/*----------*/

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

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

/*Code for menu group placeholder title and etc*/
.menuGroupPlaceholder {
  color: #154b59;
  font-family: 'monserrat', sans-serif;
  font-size: 22px;
}

/*Code for menu group placeholder descriptions*/
.menu-group-placeholder-description {
  color: #154b59;
  font-size: 14px;
  font-family: 'monserrat', sans-serif;
  padding-top: 5px;
}

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

/* option divider */
.item .row .item-divider .option-divider {
    background-color: #154b59;
    color: #ffffff;
}
/*----------*/

/*CATERING HEADINGS---------------------------------*/
/*Sometimes this and placeholders are used interchangeably depending on how old of a site*/

/* Applies colors and spacing */
.menu-instructions {
  background-color: #ffffff;
  color: #0075c9;
  font-size: 22px;
  padding-top: 15px;
  margin-bottom: 20px;
}

/* This is the code for the main header/title */
.menu-instructions-hind-upper {
  font-family: 'monserrat', sans-serif;
  color: #0075c9;
  font-size: 18px;
}

/* This is the code for the body text */
.menu-instructions-body {
  font-family: 'monserrat', sans-serif;
  color: #000000;
  font-size: 16px;
}

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

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

/*Code for menu item name*/
.menuItemName {
  font-weight: 600;
  font-size: 17px;
  font-family: 'monserrat', sans-serif;
  color: #000000;
}

/*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: 'monserrat', sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

/*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: #ff72b5 !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: #ff72b5 !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: #ff72b5;
  background: #ff72b5;
}
/*Not selected*/
.circle-negative {
  border-color: #ff72b5;
}
/* */
/*----------*/