@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');

@font-face {
	font-family: 'Bauhaus Bugler W00';
	font-weight: 500;
	src: url('https://saladstop.com.sg/wp-content/uploads/2024/08/Bauhaus-Bugler-W00-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Pacifico';
	font-weight: 400;
	src: url('https://saladstop.com.sg/wp-content/uploads/2024/08/Pacifico-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Calafia Regular';
	font-weight: 400;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/Calafia-Regular.otf') format('OpenType');
}
@font-face {
	font-family: 'Sharp Grotesk 25';
	font-weight: 400;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/SharpGroteskMedium25.ttf') format('truetype');
}
@font-face {
	font-family: 'Sharp Grotesk 25';
	font-weight: 700;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/SharpGroteskBold25.ttf') format('truetype');
}
@font-face {
	font-family: 'Sharp Grotesk 25';
	font-weight: 600;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/SharpGroteskSmBold25.ttf') format('truetype');
}
@font-face {
	font-family: 'Sharp Grotesk 25';
	font-weight: 300;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/SharpGroteskBook25.ttf') format('truetype');
}
@font-face {
	font-family: 'Sharp Grotesk';
	font-weight: 400;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/SharpGroteskMedium15.ttf') format('truetype');
}
@font-face {
	font-family: 'Sharp Grotesk';
	font-weight: 700;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/SharpGroteskBold15.ttf') format('truetype');
}
@font-face {
	font-family: 'Sharp Grotesk';
	font-weight: 600;
	src: url('https://saladstop.com.sg/wp-content/uploads/2023/07/SharpGroteskSmBold15.ttf') format('truetype');
}

.breakdown-item>*{
	font-size: 16px !important;
}

.breakdown-items-container{
	display: flex;
  flex-direction: column;
  gap: 12px !important;
}

.nutrition-carbon-footprint {
	font-size: 16px !important;
	font-weight: 400 !important;
}

.group-title{
	font-size: 32px !important;
}

    /* Global variables */
    :root {
      --menu-list-container-width: 1360px;
      --menu-list-primary-color: #0D4520;
      --menu-list-primary-color-lighten: #2a7043;
      --menu-list-accent-color: #2F2F2F;
      --menu-list-carbon-color: #C49867;
      --menu-list-bg-primary: #FFFAF1;
      --menu-list-signature-bg: #DCB59D;
      --menu-list-select-width: 290px;
      --menu-list-select-height: 44px;
      --menu-list-rounded-radius: 1.875rem;
      --menu-list-menu-gap: 2rem;
      --menu-list-drops-shadow: hsl(0, 0%, 97%, 0.2);
      --menu-list-hover-outline: #0D4520;
      --menu-list-salad-stop-primary-soy: #F4EEDC;
      --menu-list-spinach: #0D4520;
      --menu-list-feta: #FFFAF1;
      --menu-list-wasabi: #A5B59C;
      --menu-list-yoghurt: #FDFDFD;
      --menu-list-walnut: #C49867;
      --menu-list-olive: #2F2F2F;
    }

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }

    .menu-list-body {
      margin: 0;
      font-family: 'Work Sans', sans-serif;
      font-weight: 400;
      background-color: var(--menu-list-bg-primary);
      color: var(--menu-list-primary-color);
      font-size: 16px;
      width: 100%;
      line-height: 1.4;
      padding-bottom:   0px;
      text-align: center;
    }

    /* Font Weights */
    .menu-list-body .medium {
      font-weight: 500;
    }

    /* Page Wrapper */
    .menu-list-body .wrapper {
      margin-left: auto;
      margin-right: auto;
      width: min(100% - 48px);
      max-width: var(--menu-list-container-width);
      text-align: center;
    }

    /* Global styles */
    .menu-list-body button:active,
    .menu-list-body select:active {
      transform: scale(0.95);
    }

    .menu-list-body .carbon {
      color: var(--menu-list-carbon-color);
    }

    /* Loading */
    .menu-list-body .loading {
      position: absolute;
      left: 50%;
      top: 100px;
      transform: translateX(-50%);
    }

    .menu-list-body .loading-spinner {
      width: 50px;
      height: 50px;
      border: 10px solid #eee;
      border-top: 10px solid #363b3e;
      border-radius: 100%;
      animation: loader 1s infinite linear;
    }

    /* Sections */

    /* Title */
    .menu-list-body .title {
      width: 90%;
      margin: 30px auto;
    }

    /* Filters */
    .menu-list-body .filters {
      display: flex;
      flex-wrap: wrap;
      margin-left: auto;
      margin-right: auto;
      gap: 1.25rem;
      width: fit-content;
      align-items: center;
      justify-content: center;
    }

    /* Dropdown */
    .menu-list-body .checkbox-dropdown {
      width: var(--menu-list-select-width);
      height: var(--menu-list-select-height);
      background-color: white;
      border: 1px solid var(--menu-list-primary-color);
      box-sizing: border-box;
      border-radius: var(--menu-list-rounded-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-radius: var(--menu-list-rounded-radius);
      z-index: 1;
      padding-left: 48px;
      padding-right: 48px;
      text-align: center;
      font-weight: 500;
      font-size: 1.25rem;
      cursor: pointer;
      transition: all 0.1s ease;
      user-select: none;
    }

    .menu-list-body .checkbox-dropdown .selected-value {
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .menu-list-body .checkbox-dropdown:hover {
      outline: 2px solid var(--menu-list-hover-outline);
    }

    .menu-list-body .checkbox-dropdown .icon {
      position: absolute;
    }

    .menu-list-body .checkbox-dropdown .icon.icon-left {
      left: 20px;
    }

    .menu-list-body .checkbox-dropdown .icon.icon-right {
      right: 20px;
      transition: all 0.2s ease;
    }

    .menu-list-body .checkbox-list {
      position: absolute;
      top: 56px;
      z-index: 100;
      gap: 24px;
      background: white;
      width: 100%;
      border-radius: 30px;
      padding-top: 12px;
      padding-bottom: 12px;
      cursor: pointer;
      pointer-events: none;
      opacity: 0;
      transition: all 0.3s ease;
      box-shadow: 0px 4px 4px 0px #00000040;
      z-index: 100;
    }

    .menu-list-body .checkbox-list .checkbox {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-left: 30px;
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .menu-list-body .checkbox-list .checkbox-label {
      user-select: none;
    }

    .menu-list-body .checkbox-list .checkbox:hover {
      background: #0d45200c;
    }

    .menu-list-body .checkbox-list .checkbox:hover .checkbox-icon {
      outline: 2px solid #0d45201d;
    }

    .menu-list-body .checkbox-dropdown.active {
      z-index: 10;
    }

    .menu-list-body .checkbox-dropdown.active .icon.icon-right {
      transform: scaleY(-1);
    }

    .menu-list-body .checkbox-dropdown.active .checkbox-list {
      pointer-events: auto;
      opacity: 1;
    }

    .menu-list-body .checkbox .checkbox-icon path {
      fill: currentColor;
      transition: all 0.1s ease;
      transform-origin: center;
    }

    .menu-list-body .checkbox .checkbox-icon path.checkmark {
      opacity: 0;
      transform: scale(0);
    }

    .menu-list-body .checkbox.active .checkbox-icon path {
      color: var(--menu-list-primary-color);
    }

    .menu-list-body .checkbox.active .checkbox-icon path.checkmark {
      opacity: 1;
      transform: scale(1);
    }

    .menu-list-body .checkbox>* {
      pointer-events: none;
    }

    .menu-list-body .separator {
      display: block;
      width: 1px;
      background-color: black;
      height: 20px;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
    }

    /* Reset Button */
    .reset-filter-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--menu-list-select-height);
      gap: 20px;
      padding-left: 40px;
      font-weight: 600;
      font-size: 1.25rem;
      background-color: var(--menu-list-primary-color);
      padding-right: 40px;
      color: white !important;
      outline: none;
      border: none;
      border-radius: var(--menu-list-rounded-radius);
      box-sizing: border-box;
      border: 2px solid var(--menu-list-primary-color);
      transition: all 0.1s ease;
      cursor: pointer;
    }

    .reset-filter-btn .reset-icon {
      transition: transform 0.3s ease;
    }

    .reset-filter-btn:hover {
      background-color: var(--menu-list-primary-color-lighten);
    }

    .reset-filter-btn:hover .reset-icon {
      transform: rotate(180deg);
    }

    /* Menu  */
    .group-title {
      font-family: "Sharp Grotesk 25", Sans-serif;
      font-weight: 600;
      font-size: 48px;
      flex-basis: 100%;
      text-transform: uppercase;
      margin-bottom: -120px;
      text-align: center;
    }

    .group-description {
      font-weight: 500;
      font-size: 20px;
      line-height: 26px;
      text-align: center;
      flex-basis: 100%;
      margin-top: -30px;
      text-transform: capitalize;
    }

    .cyo-heading-container {
      flex-basis: 100%;
      display: flex;
      flex-direction: column;
      gap: 40px;
      margin-top: 40px;
      margin-bottom: -20px;
    }

    .cyo-heading-container.first {
      margin-top: 0;
    }

    .cyo-heading-container .group-title,
    .cyo-heading-container .group-description {
      margin-bottom: unset;
      margin-top: unset;
      line-height: 1;
    }

    .menu-container {
      row-gap: 0px;
      width: 100%;
      min-height: 480px;
      position: relative;
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
    }

    .menu-container.cyo-menu {
      row-gap: 60px;
      margin-top: 54px;
      max-width: 1360px;
      margin-left: auto;
      margin-right: auto;
      min-height: unset;
    }

    .menu-container.cyo-menu .menu-item.hidden {
      display: none;
    }

    .menu-container.cyo-menu .menu-item-info .item-name {
      font-size: 20px;
      margin-top: 0;
      font-weight: 500;
    }

    .menu-container.cyo-menu .nutritions .info {
      margin-top: 0;
      margin-bottom: 0;
    }

    .menu-list-body .menu-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1 100%;
      box-sizing: border-box;
      position: relative;
    }

    .menu-list-body .menu-item-content {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
    }

    .menu-list-body .menu-item .description-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .menu-list-body .menu-item .description {
      line-height: 22px;
      transition: all 0.3s ease;
      opacity: 0;
      position: absolute;
    }

    .menu-list-body .menu-item .description.active {
      opacity: 1;
    }

    .menu-list-body .menu-item .description.relative {
      position: relative;
    }

    .menu-list-body .menu-item .thumbnail {
      display: flex;
      width: 100%;
      border-radius: var(--menu-list-rounded-radius);
      align-items: center;
      justify-content: center;
      position: relative;
      aspect-ratio: 1 / 1;
      transition: all 0.3s ease;
      cursor: pointer;
      overflow: hidden;
    }

    .menu-list-body .menu-item .thumbnail .image-scroll {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      width: 100%;
      height: 100%;
      transition: all 0.5s ease;
    }

    .menu-list-body .menu-item .thumbnail .img-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      aspect-ratio: 1 / 1;
      width: 100%;
      height: 100%;
    }

    .menu-list-body .menu-item .thumbnail img {
      width: 72%;
      height: auto;
      max-width: 72%;
      max-height: 72%;
      object-fit: contain;
      transition: all 0.3s ease;
    }

    .menu-list-body .menu-item-info {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin-top: 1rem;
    }

    .menu-list-body .menu-item-info .item-name {
      font-family: "Sharp Grotesk 25", Sans-serif;
      font-weight: 600;
      margin-top: 0rem;
      font-size: 1.25rem;
      line-height: 30px;
      color: var(--menu-list-olive);
      text-transform: uppercase;
    }

    .menu-list-body .menu-item-info .nutritions {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 6px;
      margin-bottom: 6px;
      overflow: hidden;
    }

    .menu-list-body .nutritions .info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      margin-left: auto;
      margin-right: auto;
      position: absolute;
      opacity: 0;
      transition: all 0.3s ease;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .menu-list-body .nutritions .info.first-info {
      position: relative;
    }

    .menu-list-body .nutritions .info.active {
      opacity: 1;
    }

    .menu-list-body .nutritions .info-list {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .menu-list-body .info .allergens {
      display: flex;
      align-items: center;
    }

    /* Switch buttons */

    .menu-list-body .switch-button-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px;
      background: var(--menu-list-salad-stop-primary-soy);
      border-radius: 99999px;
      height: 52px;
      margin-top: 1rem;
    }

    .group-switch-button-container {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .group-switch-button-container .switch-button-container {
      width: calc(100% - 32px);
      max-width: 440px;
      margin-top: 0;
    }

    .menu-list-body .switch-button-container .switch-button {
      flex: 1;
      border-radius: 999999px;
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      transition: all 0.3s ease;
      outline: none;
      border: none;
      color: var(--menu-list-wasabi);
      text-transform: uppercase;
      background-color: transparent;
      cursor: pointer;
    }

    .menu-list-body .switch-button-container .switch-button.active {
      background-color: var(--menu-list-spinach);
      color: var(--menu-list-feta);
    }

    .switch-order-button-container {
        margin: 30px 0 ;
    }
    .switch-order-button-container a {
        color: var(--menu-list-feta);
    }
    .switch-order-button {
        padding: 10px 30px;
        background-color: var(--menu-list-spinach);
        border-radius: 50px;
    }

    /* Nutrition breakdown */

    .menu-list-body .nutrition-breakdowns {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      min-height: 100%;
      border-radius: var(--menu-list-rounded-radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: var(--menu-list-yoghurt);
      outline: 4px solid var(--menu-list-spinach);
      padding-top: 20px;
      padding-bottom: 50px;
      transition: all 0.3s ease;
      padding-left: 40px;
      padding-right: 40px;
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      z-index: 10;
    }

    .menu-list-body .nutrition-breakdowns .order-button {
      padding: 10px 30px;
      text-transform: uppercase;
      background-color: var(--menu-list-spinach);
      border-radius: 999999px;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease;
      position: absolute;
      bottom: -60px;
      outline: none;
      border: none;
      text-decoration: none;
    }

    .menu-list-body .nutrition-breakdowns .order-button:hover {
      opacity: 0.7;
    }

    .menu-list-body .nutrition-breakdowns .close-nutrition-button {
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .menu-list-body .nutrition-breakdowns .close-nutrition-button:hover {
      opacity: 0.7;
    }

    .menu-list-body .nutrition-breakdowns .close-nutrition-button:active {
      transform: scale(0.95);
    }

    .menu-list-body .nutrition-breakdowns .breakdown-title {
      font-size: 20px;
      line-height: 22px;
      letter-spacing: -0.4px;
      font-weight: 500;
      text-align: center;
      color: var(--menu-list-spinach);
      margin-top: 20px;
      font-family: "Sharp Grotesk 25", Sans-serif;
    }

    .menu-list-body .nutrition-breakdowns .breakdown-description {
      font-size: 14px;
      line-height: 18px;
      letter-spacing: -0.28px;
      color: var(--menu-list-spinach);
      margin-top: 20px;
    }

    .menu-list-body .breakdown-items-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 22px;
      margin-top: 20px;
    }

    .menu-list-body .breakdown-item {
      width: 100%;
      display: flex;
      text-align: left;
    }

    .menu-list-body .breakdown-item>* {
      flex: 1;
      font-size: 20px;
      line-height: 18px;
      font-weight: 400;
    }

    .menu-list-body .breakdown-item .item-value {
      padding-left: 20px;
      width: 50%;
    }

    .menu-list-body .line-separator {
      height: 1px;
      width: 100%;
      background-color: var(--menu-list-spinach);
    }

    .menu-list-body .nutrition-carbon-footprint {
      font-weight: 600;
      line-height: 18px;
      font-size: 20px;
      letter-spacing: -0.4px;
      color: var(--menu-list-walnut);
      margin-top: 40px;
    }

    .menu-list-body .end-description {
      margin-top: 20px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.28px;
    }

    .menu-list-body .menu-item.active .nutrition-breakdowns {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    /* Common styles */
    .menu-list-body .text-center {
      text-align: center;
    }

    .menu-list-body .text-xl {
      font-size: 1.1rem;
      line-height: 1.75rem;
    }

    .menu-list-body .mt-7 {
      margin-top: 1.75rem;
    }

    .legend-icon img {
        width: 40%;
    }

    /* Keyframes */
    @keyframes loader {
      100% {
        transform: rotate(360deg);
      }
    }

    @media (min-width:600px) {
      .menu-list-body .menu-item {
        padding: 15px;
        flex: 1 50%;
        max-width: 50%;
      }

      .menu-container.cyo-menu .menu-item {
        padding: 0;
      }

      .switch-order-button-container {
          display: none;
      }
    }

    @media (min-width: 801px) {
      .menu-list-body .menu-item {
        flex: 1 33.33%;
        width: 430px;
        max-width: 33.33%;
      }

      .menu-container.cyo-menu .menu-item {
        flex: 1 25%;
      }
       .menu-list-body .menu-item-info .item-name  {
          min-height: 50px;
      }
    }
    @media screen and (max-width: 768px) {
        .menu-list-body .menu-item .thumbnail {
            height: unset !important;
            margin-top: -1.5rem;
        }
        .menu-list-body .menu-item .thumbnail .image-scroll {
            height: 100% !important;
        }
        .menu-list-body .menu-item-info {
          margin-top: -2rem;
        }
        .menu-list-body .nutrition-breakdowns {
            margin: 10px 15px;
        }
        .menu-list-body .menu-item {
            margin: 0 5px;
        }
        .legend-icon img{
          width: 80%;
      }
    }