:root {
    /* Backgrounds */
    --color-background-main: #ffffff; /* White */
    --color-background-main-hover: #E4D7C7;
    --color-background-primary: #231f20;  /* Dark Grey */
    --color-background-primary-hover: #E4D7C7;
    --color-background-secondary: #ea2127;  /* Red */
    --color-background-secondary-hover: #E9DFD2;
    --color-background-tertiary: #e2d8c4; /* Dough Brown */
    --color-background-quaternary: #02a550; /* Green */
    --color-background-quaternary-hover: #17ce6f; /* Light Green */
    --color-background-quinary: #eeeeee; /* Light Grey */
    --color-background-white: #FFFFFF; /* White */
    --color-background-white-hover: #e5e5e5;
    --color-background-upsell: #efefef;
    --color-background-upsell-hover: #d9d9d9;

    /* Accent */
    --color-accent: #ea2127; /* Roma */
    --color-accent-hover: #f89b9e; /* Roma */

    /* Text */
    --color-text-primary: #231f20; /* Dark Grey */
    --color-text-primary-hover: #544f50; /* Lighter Grey */
    --color-text-secondary: #4D4A48; /* Coalfire Lt */
    --color-text-tertiary: #02a550;  /* Green*/
    --color-text-tertiary-hover: #17ce6f;  /* Light Green */
    --color-text-quaternary: #ea2127; /* Red */
    --color-text-quaternary-hover: #ff7175;  /* Light Red */
    --color-text-optional: #a0a0a0;
    --color-text-white: #FFFFFF;
    --color-text-black: #000000;

    /* Button */
    --color-button-text: var(--color-text-primary);
    --color-button-background: #02a550; /* Green */
    --color-button-background-hover: #17ce6f; /* Light Green */
    --color-button-background-hover-white: #FFFFFF;

    /* Border */
    --color-border-default: #231f20;

    /* System */
    --color-error: #BE1B0A;
    --color-disabled: #666666;
    --color-disabled-soft: #d7d7d7;
    --color-coupons: #42A95B;

    /* Other */
    --color-deal-builder-bar: #71714D;
    --color-deal-builder-bar-light: #71714D4D;
    
    --shadow:  0px 4px 2px rgba(0, 0, 0, 0.35);
    
    --hover-transition: all 0.05s ease;
    --hover-shadow: 0 4px 2px rgba(0, 0, 0, 0.5);
    --hover-transform: scale(1.01)
}

/* ------ Header ------ */
.header {
	--header-background-color: var(--color-background-primary);
    --header-text-color: var(--color-text-white);
	--header-icon-color: var(--color-text-quinary);
    --header-cart-items-background-color: var(--color-background-quaternary);
    --header-cart-items-color: var(--color-text-black);
}

.header .cart-icon {
  color: #FFFFFF;
}

.header .cart-icon > span {
  top: -44%;
  right: 16%;
  width: 26px;
  height: 26px;
  font-size: 15px;
}

.header .hamburger-icon, .header .profile-icon, .header .cart-icon {
  color: var(--color-text-white);
}

.fancy-title > div:not(:first-child) {
  color: var(--color-text-primary);
}

#modal_hamburger {
  --hamburger-ellipse-bg-color: var(--color-background-quinary);
  --hamburger-color: var(--color-accent);
  --hamburger-footer-color: var(--color-disabled);
}

#hamburger_loyalty {
  color: var(--color-background-white);
}

:is(#hamburger_items > *), #hamburger_language {
  color: var(--color-text-primary);
}

#hamburger_loyalty_points_value {
  color: var(--color-text-quaternary);
}

#hamburger_loyalty_points_text {
  color: var(--color-text-primary);
}

/* ------ Buttons -- Sign In, Customize Item ------ */
button {
    --colorActive: #78bf6e; /* Button Click Color */
    --button-color: var(--color-text-white);
	--button-bg-color: var(--color-button-background);
    --button-bg-color-secondary-hover: var(--color-text-white);
}

button:hover {
  background-color: var(--color-button-background-hover);
}

button.underline:hover {
  background-color: unset;
}

/* ------ Landing Location ------ */
.location-info-btn {
	--button-color: var(--color-text-primary);
}

.location-info-bar{
  	color: var(--color-text-primary);
}

.location-info-bar:hover, .location-info-bar:focus {
  	color: var(--color-text-primary-hover);
}

#div_header_location_bar > .location-info-bar {
  color: var(--color-text-white);
}

/* ------ Account Profile, Button, Sign Up/In ------ */
.fancy-title {
  --fancy-title-first-color: var(--color-button-background);
  --fancy-title-alt-color: var(--color-text-primary);
  font-size: 5rem;
  display: inline-block;
  margin: 0.125em auto;
}

.fancy-subtitle {
  --fancy-title-subtitle-color: var(--color-text-primary);
  --fancy-title-subtitle-color-alt: var(--color-accent);
}

#modal_header_account {
  --header-account-color: var(--color-text-primary);
}

.modal small {
  color: var(--color-text-primary);
}

#page_account .section-header {
  background: var(--color-background-quinary);
}

#page_account .section-header-edit {
  font-size: 0.85em;
}

/* ------ Favorite Items ------ */
#div_favorite_tabs .tabs-bar {
  background-color: var(--color-background-tertiary);
}

.no-fav-container {
  --favorite-none-background-color: var(--color-background-quinary);
  --favorite-none-color: var(--color-text-primary);
  text-align: center;
}

.favorite-container {
  --favorite-card-background-color: var(--color-background-quinary);
  --favorite-card-missing-mod-color: var(--color-error);
  --favorite-card-icon-background-color: var(--color-background-main);
  --favorite-card-icon-color: var(--color-text-tertiary);
  --favorite-card-icon-color-hover: var(--color-text-primary);
}

/* ------ Favorite Location ------ */

.favorite-store-card {
  --favorite-store-card-background-color: var(--color-background-quinary);
  --favorite-store-card-hours-color: var(--color-text-secondary);
  background-color: var(--favorite-store-card-background-color);
}

/* ------ My Rewards Account Area ------ */
.page-rewards-body {
  --rewards-blob-bg-color: var(--color-background-primary);
  --rewards-points-bar-color: var(--color-background-primary);
  --rewards-points-bar-color-filled: var(--color-text-tertiary);
  --rewards-points-bar-text-color: var(--color-text-white);
  --rewards-points-bar-text-color-filled: var(--color-background-main);
  --rewards-info-text-color: var(--color-background-primary);
  --rewards-header-bg-color: var(--color-background-quinary);
  --rewards-card-bg-color: var(--color-background-quinary);
  --rewards-card-redeem-color-active: var(--color-background-primary);
}

.header_background {
  color: var(--color-text-white);
}

.points-summary-container .rewards-user-info-greeting {
  color: var(--color-text-white);
}

/* ------ Segmented Button, Order Type Selection ------ */
.segmented-button {
    --segmented-button-bg-color: var(--color-background-white);
    --segmented-button-active-text-color: var(--color-background-white);
    --segmented-button-border-color: var(--color-border-default);
    --segmented-button-bg-color-hover: var(--color-accent-hover);
}

    .segmented-button > button {
        color: var(--color-text-primary);
    }

    .segmented-button > button.active {
        color: var(--color-text-white);
        background-color: var(--color-background-secondary);
    }

.segmented-button > button:not(.active):hover {
  color: var(--color-text-quaternary);
  background-color: var(--color-button-background-hover-white);
}

/* ------ Menu Bar ------ */
.menu-tabs {
  background-color: var(--color-background-tertiary);
}

.tabs-bar {
  --tab-bar-text-color: var(--color-text-primary);
  --tab-bar-text-color-active: var(--color-text-tertiary);
}

@media (hover: hover) {
  .tab-bar-tab:hover {
    color: var(--tab-bar-text-color-active);
    background-color: unset;
  }
}

/* ------ Delivery Address Search ------ */
.locations-main-container {
  --locations-card-bg-color: var(--color-background-quinary);
  --locations-card-bg-color-active: var(--color-background-quinary);
  --locations-address-form-border-color: var(--color-border-default);
}

.user-address p {
  color: var(--color-text-white);
}

.user-address {
  background-color: var(--color-background-primary);
  --locations-card-secondary-text-color: var(--color-text-white);
  color: var(--color-text-white);
}

.address-form {
  border: 2px solid var(--locations-address-form-border-color);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 10px;
  background-color: var(--locations-card-bg-color);
  transition: background-color 0.125s ease-in-out;
}

/* ------ Take Out/Dine In Search with Favorites ------ */
.store-list-selector > div.active {
  color: var(--color-text-tertiary);
  border-bottom: 3px solid currentColor;
}

.locations-main-container {
  --locations-selector-color: var(--color-text-primary);
}

.store-list-selector > div.active:hover {
  color: var(--color-background-quaternary-hover);
  border-bottom: 3px solid currentColor;
}

.store-address:hover {
    color: var(--color-text-white);
    --locations-card-secondary-text-color: var(--color-text-white);
  background-color: var(--color-background-quaternary);
}

.store-address.active {
    color: var(--color-text-white);
    --locations-card-secondary-text-color: var(--color-text-white);
  background-color: var(--color-background-primary);
}

/* ------ Menu Category Pill Bar ------ */
.pill-bar-container {
  --pill-bar-background-color: var(--color-background-primary);
  --pill-bar-text-color: var(--color-text-white);
  --pill-bar-background-color-disabled: var(--color-disabled);
  --pill-bar-background-color-active: var(--color-background-quaternary);
  --pill-bar-background-color-hover: var(--color-background-quaternary-hover);
  --pill-bar-text-color-active: var(--color-text-white);
}

/* ------ Menu Item Cards ------ */
.menu-item-card-small {
    --menu-item-card-bg-color: var(--color-background-white);
    --menu-item-card-bg-color-hover: var(--color-background-white-hover);
    box-shadow: var(--shadow);
    transition: var(--hover-transition);
}

.menu-item-cart-card-actions .item-quantity {
	background-color: #d5d5d5;
}

.menu-item-card-small:not(.selected):hover {
    box-shadow: var(--hover-shadow);
    transform: var(--hover-transform);
    background-color: var(--color-background-white-hover);
}

.meal-deal-card {
    box-shadow: var(--shadow);
    transition: var(--hover-transition);
}

.meal-deal-card:hover {
    box-shadow: var(--hover-shadow);
    transform: var(--hover-transform);
    background-color: var(--color-background-secondary);
    --meal-deal-card-border-color: var(--color-button-border-secondary);
}

@media (max-width: 700px) {
    .menu-parent-wrapper .menu-item-card-parent {
        padding: 9px 15px;
    }
}

/* ------ Meal Deal Card ------ */
.meal-deal-card {
  --meal-deal-card-background-color: var(--color-background-white);
  --meal-deal-card-background-color-hover: var(--color-background-white-hover);
  --meal-deal-card-border-color: var(--color-border-default);
  --meal-deal-card-content-color: var(--color-text-primary);
  --color-background-secondary: var(--color-background-white-hover);
  background-color: var(--meal-deal-card-background-color);
  border: 1px solid var(--meal-deal-card-border-color);
  box-shadow: var(--shadow);
  transition: var(--hover-transition);
}

.meal-deal-card:hover {
  --meal-deal-card-border-color: var(--color-border-default);
}

/* ------ Recently Ordered ------ */
.recent-order-main-card {
  --recent-orders-card-background-color: var(--color-background-quinary);
  --recent-orders-card-order-status-background-color: var(--color-background-primary);
  --recent-orders-card-order-status-text-color: var(--color-text-tertiary)
  background-color: var(--recent-orders-card-background-color);
}

.recent-order-card-header .order-status {
  background-color: var(--color-background-primary);
  color: var(--color-text-white);
}

.recent-orders-parent .no-recent-orders-message {
  background-color: var(--color-background-quinary);
  padding: 20px;
  border-radius: 8px;
}

/* ------ Menu Item ------ */
.customize-item-container {
  --customize-item-half-card: var(--color-background-secondary);
  --customize-item-calorie-price-color: var(--color-text-secondary);
  --customize-item-section-header-bg-color: var(--color-background-quinary);
  --customize-item-section-header-option-color: var(--color-text-tertiary);
  --customize-item-footer-bg-color: var(--color-background-quinary);
  --customize-item-footer-quantity-bg-color: var(--color-background-white);
  --customize-item-footer-quantity-bg-color-hover: var(--color-background-quaternary-hover);
  --customize-item-footer-quantity-border-color: var(--color-text-primary);
}

#btn_customize_item_favorite, #btn_customize_item_favorite_half {
  background-color: var(--color-background-white);
}

#btn_customize_item_favorite:hover, #btn_customize_item_favorite_half:hover {
  opacity: 0.75;
  transition: all 0.25s ease;
}

/* Half and Half */
.customize-item-header-multi-card {
  align-items: center;
  background-color: var(--color-background-quinary);
}

/* ------- Second Half Selection Modal -------- */
#modal_select_second_half > .modal-header {
  width: 100%;
}


/*Favorite Icon Color */
.icon-favorites {
    --button-color: var(--color-text-primary);
    --modal-background-color: var(--color-text-primary);
}

.icon-heart-filled {
    --button-color: var(--color-text-tertiary);
    --modal-background-color: var(--color-text-tertiary);
}

.item-section-header > h2 {
  color: var(--color-text-primary);
}

.item-section-header > span {
  color: var(--color-text-primary);
  font-size: 14px;
}

.bottom-bar.scrolled {
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}

.quantity-selector {
  --radius: 42px;
  border-radius: var(--radius);
}

.quantity-selector button {
    color: var(--color-text-primary);
}

/* ------ Hot Deals (Meal Deals) ------ */
.deal-builder-container {
  --deal-builder-header-shadow-color: rgba(0, 0, 0, 0.4);
  --deal-builder-header-complete-color: var(--color-background-quaternary);
  --deal-builder-header-incomplete-color: var(--color-background-white);
  --deal-builder-group-header-bg-color: var(--color-background-quinary);
  --deal-builder-group-header-color: var(--color-text-tertiary);
  --deal-builder-group-header-added-bg-color: var(--color-background-primary);
  --deal-builder-group-header-added-color: var(--color-background-main);
  --deal-builder-footer-bg-color: var(--color-background-primary);
  --deal-builder-footer-color: var(--color-text-tertiary);
}

.deal-builder-selected-status {
  font-size: 13px;
	color: var(--color-background-white);
}

.menu-item-card-small.horizontal {
  --meal-deal-section-card-background-color: var(--color-background-white);
  --meal-deal-section-card-background-color-selected: var(--color-background-quinary);
  --meal-deal-section-card-border-color-selected: var(--color-text-primary);
  background-color: var(--meal-deal-section-card-background-color);
}

.button-link {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

button.button-link:hover {
  color: var(--color-text-tertiary-hover);
}

/* ------ Order Cart before Payment ------ */
.menu-item-cart-card-parent {
  --menu-item-cart-card-price-color: var(--color-text-primary);
  --menu-item-cart-card-quantity-background-color: var(--color-background-primary);
  --redeemed-label-color: var(--color-coupons);
  --menu-item-cart-card-quantity-background-color-disabled: var(--btnColorBgSecondaryDisabled);
  background-color: var(--color-background-quinary);
}

.menu-item-cart-card-actions .item-quantity {
  background-color: var(--color-background-main);
}

.menu-item-cart-card-actions .item-quantity .quantity-btn {
  background-color: unset;
  color: var(--color-text-primary);
}

/* Add More Items Button */
button.secondary {
  color: var(--color-text-primary);
}

button.secondary:hover {
  color: var(--color-text-quaternary);
  background-color: var(--color-background-main);
}

.cart-no-items {
  background-color: var(--color-background-quinary);
}

/* Upsell Row */
.upsell-wrapper {
  --upsell-background-color: var(--color-background-upsell);
  --upsell-background-color-hover: var(--color-background-upsell-hover);
}

/* My Rewards, Available Offers, etc. */
.cart-reward-section {
  --cart-reward-bg-color: var(--color-background-quinary);
  --cart-reward-arrow-color: var(--color-background-primary);
  --cart-reward-card-bg-color: var(--color-background-primary);
  --cart-reward-card-bg-color-hover: var(--color-background-primary-hover);
  --cart-reward-card-expiry-color: var(--color-text-secondary);
}

/* Redeem Points */
.toggle-control {
  --toggle-control-bg-color: var(--color-background-main);
  --selected-bg-color: var(--color-background-quaternary);
  --selected-text-color: var(--color-background-primary);
  --toggle-control-lock-color: var(--btnColorDisabled);
  --toggle-shadow: var(--shadow);
  display: inline-flex;
  background: var(--toggle-control-bg-color);
}

.toggle-control div.active {
  color: var(--color-text-white);
}

.arrow-scroller-container {
  --arrow-bg-color: var(--color-background-quinary);
  --arrow-bg-color-hover: rgba(145, 122, 122, 0.133);
}

/* Promo Code */
.promo-input-container > button {
  color: var(--color-text-primary);
}

.cart-reward-card {
  color: var(--color-text-white);
  background-color: var(--color-background-quaternary);
}

.cart-reward-card:hover {
  background-color: var(--color-background-quaternary-hover);
}

.cart-reward-card .expiry {
  font-size: 14px;
  color: var(--color-text-white);
}

/* ------ Order Confirmation ------ */
.modal :is(.modal-header, .modal-footer) .header-title {
  color: var(--color-text-white);
}

#modal_confirmation_delete {
  color: var(--color-text-white);
}

/* ------ Order Tracker ------ */
.track-order-container {
  --track-order-bar-background-color: var(--color-background-quinary);
  --track-order-bar-color: var(--color-text-tertiary);
  --track-order-call-background-color: var(--color-background-main);
  --track-order-call-border-color: var(--color-border-default);
  --track-order-call-color: var(--color-accent);
  --track-order-dots-complete: var(--color-accent);
  --track-order-dots-incomplete: var(--color-text-primary);
  --track-order-text-incomplete: var(--color-text-primary);
}

.dotted-line {
  margin-top: -15px;
}

/*Store Bar */
.store-location-bar-container {
  display: flex;
  background-color: var(--track-order-bar-background-color);
}

/* ------ Mobile App Customization ------ */
.bottom-nav {
  background-color: var(--color-background-quinary);
}

#nav_bottom {
  --navbar-background-color: var(--color-background-quaternary-hover);
  --navbar-icon-color: var(--color-text-primary);
  --navbar-icon-active-color: var(--color-text-white);
  --navbar-active-blob: var(--color-background-quaternary);
}

#nav_order {
  --order-type-navbar-background-color: var(--color-background-primary);
  --order-type-navbar-color: var(--color-text-white);
  background-color: var(--order-type-navbar-background-color);
  color: var(--order-type-navbar-color);
}