/* INDEX
-------------------------------------------------
01. FONT FILES
02. BASIC SETTINGS
03. HOME HEADER
04. HEADER
05. BURGER MENU
06. FOOTER
07. SPLASH
08. CONTENT
09. LOCATOR (ORDER HERE)
10. MAP POPUPS
11. CATEGORIES
12. BOXES
13. PROMO SLIDES
14. ORDER NAV
15. BASKET
16. DISH CATEGORIES
17. DISH LISTINGS
18. DISH LISTINGS (PROMOTED)
19. DISH OPTIONS MODAL
20. CHECKOUT
21. CONTROL PANEL
22. SUBSCRIBE
23. PORTAL


/* 01. FONT FILES
------------------------------------------------- */
/* Normal font file */
@font-face { font-family: 'GothamHTF'; font-weight: 400; src: url('/Global_Theme/fonts/GothamHTF/GothamHTF-book.woff2') format('woff2'), url('/Global_Theme/fonts/GothamHTF/GothamHTF-book.woff') format('woff'); }

/* Bold font file */
@font-face { font-family: 'GothamHTF'; font-weight: 700; src: url('/Global_Theme/fonts/GothamHTF/GothamHTF-bold.woff2') format('woff2'), url('/Global_Theme/fonts/GothamHTF/GothamHTF-bold.woff') format('woff'); }


/* 02. BASIC SETTINGS
------------------------------------------------- */
:root {
  /* Basic */
  --primary-color: #debc8a;
  --secondary-color: #38281b;
  --normal-font: 'GothamHTF', sans-serif;
  --bold-font: 'GothamHTF', sans-serif;
  --rounding: 0.5rem;

  /* Page */
  --background-color: #fff;
  --color: #000;

  /* Headings */
  --heading-color: var(--primary-color);

  /* Links */
  --link-color: var(--primary-color);
  --link-hover-color: var(--secondary-color);

  /* Forms */
  --form-label-color: var(--primary-color);
  --form-field-background-color: var(--background-color);
  --form-field-border-color: var(--primary-color);
  --form-field-color: var(--color);
  --form-error-color: #f00;
  --form-success-color: #05a134;

  /* Buttons */
  --button-background-color: var(--primary-color);
  --button-border-color: var(--primary-color);
  --button-color: #fff;
  --button-hover-background-color: var(--secondary-color);
  --button-hover-border-color: var(--secondary-color);
  --button-hover-color: #fff;
}


/* 03. HOME HEADER
------------------------------------------------- */
.page--default .header {
  /* Basic */
  --background-color: transparent;
  --box-shadow: 0 1.5rem 1.5rem 0 rgba(0, 0, 0, 0.5);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: var(--color);
  --button-border-color: var(--color);
  --button-color: var(--secondary-color);
  --button-hover-background-color: var(--secondary-color);
  --button-hover-border-color: var(--secondary-color);
  --button-hover-color: var(--color);

  /* User icon */
  --user-icon-background-color: transparent;
  --user-icon-color: var(--color);
  --user-icon-hover-background-color: transparent;
  --user-icon-hover-color: var(--secondary-color);

  /* Burger icon */
  --burger-icon-background-color: transparent;
  --burger-icon-color: var(--color);
  --burger-icon-hover-background-color: transparent;
  --burger-icon-hover-color: var(--primary-color);

  /* Social icons */
  --social-icon-background-color: var(--secondary-color);
  --social-icon-color: var(--color);
  --social-icon-hover-background-color: var(--color);
  --social-icon-hover-color: var(--secondary-color);
}


/* 04. HEADER
------------------------------------------------- */
.header {
  /* Basic */
  --background-color: var(--primary-color);
  --box-shadow: none;
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: var(--secondary-color);
  --button-border-color: var(--secondary-color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--secondary-color);

  /* User icon */
  --user-icon-background-color: transparent;
  --user-icon-color: var(--color);
  --user-icon-hover-background-color: transparent;
  --user-icon-hover-color: var(--secondary-color);

  /* Burger icon */
  --burger-icon-background-color: transparent;
  --burger-icon-color: var(--color);
  --burger-icon-hover-background-color: transparent;
  --burger-icon-hover-color: var(--secondary-color);

  /* Social icons */
  --social-icon-background-color: var(--secondary-color);
  --social-icon-color: var(--color);
  --social-icon-hover-background-color: var(--color);
  --social-icon-hover-color: var(--secondary-color);
}


/* 05. BURGER MENU
------------------------------------------------- */
@media only screen and (max-width: 1023px) {
  .burger-menu {
    /* Basic */
    --background-color: #fff;
    --color: #000;

    /* Header */
    --header-background-color: var(--secondary-color);
    --header-color: #fff;

    /* Links */
    --link-color: var(--color);
    --link-hover-color: var(--color);

    /* Buttons */
    --button-background-color: var(--primary-color);
    --button-border-color: var(--primary-color);
    --button-color: #fff;
    --button-hover-background-color: var(--secondary-color);
    --button-hover-border-color: var(--secondary-color);
    --button-hover-color: #fff;

    /* User icon */
    --user-icon-background-color: transparent;
    --user-icon-color: #fff;
    --user-icon-hover-background-color: transparent;
    --user-icon-hover-color: var(--primary-color);
  }
}


/* 06. FOOTER
------------------------------------------------- */
.footer {
  /* Basic */
  --background-color: var(--primary-color);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: var(--secondary-color);
  --button-border-color: var(--secondary-color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--secondary-color);

  /* Social icons */
  --social-icon-background-color: var(--color);
  --social-icon-color: var(--secondary-color);
  --social-icon-hover-background-color: var(--secondary-color);
  --social-icon-hover-color: var(--color);

  /* Order icons */
  --order-icon-color: var(--color);
  --order-icon-hover-color: var(--secondary-color);
}


/* 07. SPLASH
------------------------------------------------- */
.splash {
  /* Basic */
  --background-color: transparent;
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--primary-color);

  /* Social icons */
  --social-icon-background-color: transparent;
  --social-icon-color: #fff;
  --social-icon-hover-background-color: transparent;
  --social-icon-hover-color: var(--primary-color);
}


/* 08. CONTENT
------------------------------------------------- */
.content {
  /* Basic */
  --background-color: inherit;
  --color: inherit;
  --trim-color: var(--primary-color);

  /* Headings */
  --heading-color: inherit;

  /* Links */
  --link-color: inherit;
  --link-hover-color: inherit;

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: inherit;
  --button-hover-border-color: inherit;
  --button-hover-color: inherit;
}


/* 09. LOCATOR (ORDER HERE)
------------------------------------------------- */
.locator {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: #fff;

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: var(--primary-color);
  --button-border-color: var(--primary-color);
  --button-color: var(--secondary-color);
  --button-hover-background-color: #fff;
  --button-hover-border-color: #fff;
  --button-hover-color: var(--secondary-color);

  /* Forms */
  --form-label-color: var(--color);
  --form-field-background-color: var(--color);
  --form-field-border-color: var(--color);
  --form-field-color: inherit;
  --form-error-color: var(--color);
  --form-success-color: var(--color);

  /* Locator icon */
  --locator-icon-background-color: var(--color);
  --locator-icon-color: var(--primary-color);
}


/* 10. MAP POPUPS
------------------------------------------------- */
.map {
  /* Basic */
  --background-color: inherit;
  --color: inherit;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: inherit;
  --link-hover-color: inherit;

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: inherit;
  --button-hover-border-color: inherit;
  --button-hover-color: inherit;
}


/* 11. CATEGORIES
------------------------------------------------- */
.categories {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: #fff;

  /* Headings */
  --heading-background-color: transparent;
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--primary-color);
}

.home-category {
  /* Basic */
  --background-color: var(--primary-color);
  --border-color: var(--primary-color);
  --color: #fff;
  --overlay-color: rgba(0, 0, 0, 0.2);
  --hover-background-color: var(--primary-color);
  --hover-border-color: var(--border-color);
  --hover-color: var(--color);
  --hover-overlay-color: transparent;

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--primary-color);
}


/* 12. BOXES
------------------------------------------------- */
/* Odd boxes (including Support box) */
.boxes > div,
.support-box:last-of-type {
  /* Basic */
  --background-color: var(--primary-color);
  --box-shadow: none;
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--primary-color);
}

/* Even boxes */
.boxes > div:nth-of-type(even) {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--secondary-color);
}


/* 13. PROMO SLIDES
------------------------------------------------- */
.promo-slides {
  /* Basic */
  --arrow-color: var(--color);
}

/* 1st slide */
.promo-slide:nth-of-type(4n + 1) {
  /* Basic */
  --background-color: var(--primary-color);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--primary-color);
}

/* 2nd slide */
.promo-slide:nth-of-type(4n + 2) {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--secondary-color);
}

/* 3rd slide */
.promo-slide:nth-of-type(4n + 3) {
  /* Basic */
  --background-color: var(--primary-color);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--primary-color);
}

/* 4th slide */
.promo-slide:nth-of-type(4n + 4) {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: transparent;
  --button-border-color: var(--color);
  --button-color: var(--color);
  --button-hover-background-color: var(--color);
  --button-hover-border-color: var(--color);
  --button-hover-color: var(--secondary-color);
}


/* 14. ORDER NAV
------------------------------------------------- */
.order-nav {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: #fff;

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);
}


/* 15. BASKET
------------------------------------------------- */
.basket-wrapper {
  /* Basic */
  --background-color: inherit;
  --color: inherit;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: inherit;
  --link-hover-color: inherit;

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: inherit;
  --button-hover-border-color: inherit;
  --button-hover-color: inherit;

  /* Mobile close button */
  --mobile-close-button-color: var(--primary-color);

  /* Quantity icons */
  --quantity-icon-color: var(--primary-color);
  --quantity-icon-hover-color: var(--primary-color);

  /* Other icons */
  --other-icon-color: var(--primary-color);
  --other-icon-hover-color: var(--primary-color);

  /* Disabled buttons */
  --disabled-button-background-color: #c4c3c2;
  --disabled-button-border-color: #c4c3c2;
  --disabled-button-color: #fff;
  --disabled-button-hover-background-color: #c4c3c2;
  --disabled-button-hover-border-color: #c4c3c2;
  --disabled-button-hover-color: #fff;
}


/* 16. DISH CATEGORIES
------------------------------------------------- */
.product-category {
  /* Basic */
  --color: inherit;

  /* Headings */
  --heading-color: var(--color);
}


/* 17. DISH LISTINGS
------------------------------------------------- */
.products {
  /* Basic */
  --background-color: inherit;
  --color: inherit;
}

.product-listing {
  /* Basic */
  --background-color: #f2f2f2;
  --color: inherit;

  /* Trim effects */
  --desktop-box-shadow-hover: 0.6rem 0.6rem 0.5rem 0 rgba(211, 211, 211, 1);
  --mobile-border-color: var(--secondary-color);

  /* Headings */
  --heading-color: var(--color);

  /* Dish number */
  --number-background-color: var(--color);
  --number-color: var(--secondary-color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: inherit;
  --button-hover-border-color: inherit;
  --button-hover-color: inherit;

  /* Alternative buttons */
  --alt-button-background-color: var(--secondary-color);
  --alt-button-border-color: var(--secondary-color);
  --alt-button-color: #fff;
  --alt-button-hover-background-color: var(--primary-color);
  --alt-button-hover-border-color: var(--primary-color);
  --alt-button-hover-color: #fff;
}


/* 18. DISH LISTINGS (PROMOTED)
------------------------------------------------- */
.dishSpecial32 .product-listing {
  /* Basic */
  --background-color: var(--primary-color);
  --color: #fff;

  /* Trim effects */
  --desktop-box-shadow-hover: 0.6rem 0.6rem 0.5rem 0 rgba(211, 211, 211, 1);
  --mobile-border-color: var(--secondary-color);

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Buttons */
  --button-background-color: var(--color);
  --button-border-color: var(--color);
  --button-color: var(--secondary-color);
  --button-hover-background-color: var(--secondary-color);
  --button-hover-border-color: var(--secondary-color);
  --button-hover-color: var(--color);

  /* Alternative buttons */
  --alt-button-background-color: var(--color);
  --alt-button-border-color: var(--color);
  --alt-button-color: var(--secondary-color);
  --alt-button-hover-background-color: var(--secondary-color);
  --alt-button-hover-border-color: var(--secondary-color);
  --alt-button-hover-color: var(--color);
}


/* 19. DISH OPTIONS MODAL
------------------------------------------------- */
.product-options {
  /* Basic */
  --background-color: inherit;
  --color: inherit;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Forms */
  --form-label-color: var(--color);
  --form-option-color: inherit;
  --form-option-alt-color: #f5f5f5;

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: inherit;
  --button-hover-border-color: inherit;
  --button-hover-color: inherit;

  /* Alternative buttons */
  --alt-button-background-color: var(--secondary-color);
  --alt-button-border-color: var(--secondary-color);
  --alt-button-color: #fff;
  --alt-button-hover-background-color: var(--primary-color);
  --alt-button-hover-border-color: var(--primary-color);
  --alt-button-hover-color: #fff;

  /* Close icon */
  --close-icon-color: var(--primary-color);
  --close-icon-hover-color: var(--primary-color);
}


/* 20. CHECKOUT
------------------------------------------------- */
#checkoutMWCF {
  /* Basic */
  --background-color: inherit;
  --color: inherit;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: inherit;
  --link-hover-color: inherit;

  /* Forms */
  --form-label-color: inherit;
  --form-field-background-color: inherit;
  --form-field-border-color: inherit;
  --form-field-color: inherit;
  --form-fieldset-border-color: var(--primary-color);
  --form-error-color: inherit;
  --form-success-color: inherit;

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: inherit;
  --button-hover-border-color: inherit;
  --button-hover-color: inherit;

  /* Alternative buttons */
  --alt-button-background-color: var(--secondary-color);
  --alt-button-border-color: var(--secondary-color);
  --alt-button-color: #fff;
  --alt-button-hover-background-color: var(--primary-color);
  --alt-button-hover-border-color: var(--primary-color);
  --alt-button-hover-color: #fff;

  /* Icons */
  --icon-color: var(--primary-color);
  --icon-hover-color: var(--secondary-color);

  /* Other */
  --order-type-color: var(--primary-color);
  --payment-selected-background-color: var(--primary-color);
  --payment-selected-color: #fff;
}


/* 21. CONTROL PANEL
------------------------------------------------- */
#CPconsoleMiddle {
  /* Basic */
  --background-color: inherit;
  --color: inherit;
  --trim-background-color: var(--primary-color);
  --trim-color: #fff;

  /* Headings */
  --heading-background-color: var(--trim-background-color);
  --heading-color: var(--trim-color);

  /* Links */
  --link-color: inherit;
  --link-hover-color: inherit;

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: inherit;
  --button-hover-border-color: inherit;
  --button-hover-color: inherit;

  /* Panels */
  --panel-background-color: var(--background-color);
  --panel-box-shadow: 0 0.5rem 0.5rem 0.1rem rgba(153, 153, 153, 1);
  --panel-color: var(--color);
  --panel-hover-background-color: var(--background-color);
  --panel-hover-box-shadow: 0 0.5rem 0.5rem 0.1rem rgba(153, 153, 153, 1);
  --panel-hover-color: var(--primary-color);
}


/* 22. SUBSCRIBE
------------------------------------------------- */
.subscribe {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: #fff;

  /* Headings */
  --heading-color: var(--color);

  /* Links */
  --link-color: var(--color);
  --link-hover-color: var(--color);

  /* Forms */
  --form-label-color: var(--color);
  --form-field-background-color: var(--color);
  --form-field-border-color: var(--color);
  --form-field-color: #000;
  --form-fieldset-border-color: var(--primary-color);
  --form-error-color: inherit;
  --form-success-color: inherit;

  /* Buttons */
  --button-background-color: var(--color);
  --button-border-color: var(--primary-color);
  --button-color: var(--primary-color);
  --button-hover-background-color: var(--primary-color);
  --button-hover-border-color: var(--primary-color);
  --button-hover-color: var(--color);
}


/* 23. PORTAL LISTINGS
------------------------------------------------- */
.portal-listing {
  /* Basic */
  --background-color: var(--secondary-color);
  --color: white;

  /* Headings */
  --heading-color: var(--color);

  /* Buttons */
  --button-background-color: inherit;
  --button-border-color: inherit;
  --button-color: inherit;
  --button-hover-background-color: var(--button-color);
  --button-hover-border-color: var(--button-color);
  --button-hover-color: var(--button-background-color);
}