/* ++++++++++++++++++++++++++++++++++++++ */
/*  Font files                            */
/* ++++++++++++++++++++++++++++++++++++++ */

@font-face {
  font-family: 'gothamhtf-light';
  src: url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-light.woff2')
      format('woff2'),
    url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-light.woff')
      format('woff');
}

@font-face {
  font-family: 'gothamhtf-book';
  src: url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-book.woff2')
      format('woff2'),
    url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-book.woff')
      format('woff');
}

@font-face {
  font-family: 'gothamhtf-medium';
  src: url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-medium.woff2')
      format('woff2'),
    url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-medium.woff')
      format('woff');
}

@font-face {
  font-family: 'gothamhtf-bold';
  src: url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-bold.woff2')
      format('woff2'),
    url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-bold.woff')
      format('woff');
}

:root {

  /* ++++++++++++++++++++++++++++++++++++++ */
  /*  Colors                                */
  /* ++++++++++++++++++++++++++++++++++++++ */

  --color-black: #000;
  --color-white: #fff;
  --color-grey: #e9e8e7;
  --color-grey-dark: #b3b2b1;
  --color-red: #e30613;

  --color-primary: #C22248;
  --color-secondary: #2c2c2c;


  /* ++++++++++++++++++++++++++++++++++++++ */
  /*  Font families                         */
  /* ++++++++++++++++++++++++++++++++++++++ */

  --font-family-light: 'gothamhtf-light', Arial, Helvetica, sans-serif;
  --font-family-standard: 'gothamhtf-book', Arial, Helvetica, sans-serif;
  --font-family-medium: 'gothamhtf-medium', Arial, Helvetica, sans-serif;
  --font-family-bold: 'gothamhtf-bold', Arial, Helvetica, sans-serif;

  /* +++++++++++++++++++++++++++++++++++++ */
  /*  Global_Theme variables               */
  /* +++++++++++++++++++++++++++++++++++++ */

  --body-background-color: var(--color-grey);
  --body-color: var(--color-black);
  --body-font: var(--font-family-standard);

  /* Generic */
  --wrapper-width-desktop: 1600px;
  --anchor-color: var(--color-black);
  --letter-spacing: 0.05em;

  /* Header */
  --header-background-color: transparent;

  /* SVG icons */
  --svg-icon-fill: var(--color-primary);
  --svg-icon-fill-hover: var(--color-secondary);

  /* Forms */
  --form-heading-color: var(--color-primary);
  --form-label-color: var(--color-secondary);
  --form-field-border-color: var(--color-primary);
  --form-field-border-radius: 0;
  --form-submit-border-radius: 0;
  --form-success-color: var(--color-primary);
  --form-error-color: var(--color-red);

  /* Buttons */
  --button-border-radius: 0;
  
  --button-primary-background-color: var(--color-primary);
  --button-primary-border-color: var(--color-primary);
  --button-primary-color: var(--color-white);
  --button-primary-background-color-hover: var(--color-secondary);
  --button-primary-border-color-hover: var(--color-secondary);
  --button-primary-color-hover: var(--color-white);

  --button-secondary-background-color: var(--color-secondary);
  --button-secondary-border-color: var(--color-secondary);
  --button-secondary-color: var(--color-white);
  --button-secondary-background-color-hover: var(--color-primary);
  --button-secondary-border-color-hover: var(--color-primary);
  --button-secondary-color-hover: var(--color-white);

  /* Map */
  --map-time-color: var(--color-black);
  --map-delivery-cost-color: var(--color-primary);
  --map-tel-color: var(--color-primary);

  /* Boxes */
  --boxes-mobile-padding: 40px 10px;
  --boxes-tablet-padding: 40px 10px;
  --boxes-desktop-padding: 40px 10px;

  /* Box */
  --box-background-color: var(--color-primary);
  --box-border-radius: 4px;
  --box-color: var(--color-white);
  --box-font-family: var(--font-family-standard);
  --box-text-align: center;
  --box-text-transform: none;

  /* Box (alt) */
  --box-alt-background-color: var(--color-secondary);
  --box-alt-color: var(--color-white);

  /* Box (headings) */
  --box-heading-font-family: var(--font-family-bold);
  --box-heading-text-transform: uppercase;

  /* Box (buttons) */
  --box-button-border-color: var(--color-white);
  --box-button-background-color: transparent;
  --box-button-color: var(--color-white);
  --box-button-hover-border-color: var(--color-white);
  --box-button-hover-background-color: var(--color-white);
  --box-button-hover-color: var(--color-primary);

  /* Box (alt buttons) */
  --box-alt-button-border-color: var(--color-white);
  --box-alt-button-background-color: transparent;
  --box-alt-button-color: var(--color-white);
  --box-alt-button-hover-border-color: var(--color-white);
  --box-alt-button-hover-background-color: var(--color-white);
  --box-alt-button-hover-color: var(--color-secondary);

  /* Box (mobile) */
  --box-mobile-button-margin: 5px;
  --box-mobile-font-size: 16px;
  --box-mobile-heading-font-size: 20px;
  --box-mobile-heading-margin: 1em 0;
  --box-mobile-padding: 20px;
  --box-mobile-paragraph-margin: 1em 0;
  --box-mobile-spacing: 10px;

  /* Box (tablet) */
  --box-tablet-button-margin: 5px;
  --box-tablet-font-size: 16px;
  --box-tablet-heading-font-size: 22px;
  --box-tablet-heading-margin: 1em 0;
  --box-tablet-padding: 20px;
  --box-tablet-paragraph-margin: 1em 0;
  --box-tablet-spacing: 10px;

  /* Box (desktop) */
  --box-desktop-button-margin: 5px;
  --box-desktop-font-size: 16px;
  --box-desktop-heading-font-size: 24px;
  --box-desktop-heading-margin: 1em 0;
  --box-desktop-padding: 20px;
  --box-desktop-paragraph-margin: 1em 0;
  --box-desktop-spacing: 10px;

  /* Promotion slides */
  --promo-slides-arrow-color: var(--color-black);
  --promo-slides-background-color: var(--body-background-color);
  --promo-slides-color: var(--body-color);
  --promo-slide-border-radius: 4px;
  --promo-slide-heading-text-transform: uppercase;
  --promo-slide-heading-font-family: var(--font-family-bold);
  --promo-slide-heading-font-size-desktop: 24px;
  --promo-slide-heading-font-size-mobile: 20px;
  --promo-slide-summary-text-transform: none;
  --promo-slide-summary-font-family: var(--font-family-standard);
  --promo-slide-summary-font-size-desktop: 16px;
  --promo-slide-summary-font-size-mobile: 16px;
  --promo-slide-1nth-background-color: var(--color-primary);
  --promo-slide-1nth-color: var(--color-white);
  --promo-slide-2nth-background-color: var(--color-secondary);
  --promo-slide-2nth-color: var(--color-white);
  --promo-slide-3nth-background-color: var(--color-primary);
  --promo-slide-3nth-color: var(--color-white);
  --promo-slide-4nth-background-color: var(--color-secondary);
  --promo-slide-4nth-color: var(--color-white);

  /* Home page dish categories */
  --home-categories-background-color: transparent;
  --home-categories-color: var(--color-black);

  --home-categories-heading-color: var(--home-categories-color);
  --home-categories-heading-font-family: var(--font-family-bold);
  --home-categories-heading-font-size-mobile: 32px;
  --home-categories-heading-font-size-desktop: 48px;

  --home-category-background-color: var(--color-primary);
  --home-category-border-color: transparent;
  --home-category-border-radius: 10px;
  --home-category-border-width-mobile: 0;
  --home-category-border-width-desktop: 0;
  --home-category-color: var(--color-white);
  --home-category-overlay-color: rgba(0, 0, 0, 0.2);

  --home-category-title-font-family: var(--font-family-bold);
  --home-category-title-font-size-mobile: 28px;
  --home-category-title-font-size-desktop: 40px;
  --home-category-title-text-transform: none;

  --home-category-description-font-family: var(--font-family-standard);
  --home-category-description-font-size-mobile: 12px;
  --home-category-description-font-size-desktop: 16px;

  /* Order page */
  --order-page-background-color: var(--color-grey);
  --order-page-color: var(--body-color);

  /* Order page nav */
  --order-nav-background-color: var(--color-secondary);
  --order-nav-color: var(--color-white);

  /* Order page dish categories */
  --dish-category-heading-color: var(--color-primary);

  /* Dish listing */
  --dish-listing-background-color: var(--color-white);
  --dish-listing-border-color-mobile: #e2e2e2;
  --dish-listing-border-radius: 0;
  --dish-listing-color: var(--body-color);
  --dish-listing-hover-box-shadow: 6px 6px 5px 0 rgba(211, 211, 211, 1);
  --dish-listing-order-button-background-color: var(--button-primary-background-color);
  --dish-listing-order-button-border-color: var(--button-primary-border-color);
  --dish-listing-order-button-color: var(--button-primary-color);
  --dish-listing-order-button-hover-background-color: var(--button-primary-background-color-hover);
  --dish-listing-order-button-hover-border-color: var(--button-primary-border-color-hover);
  --dish-listing-order-button-hover-color: var(--button-primary-color-hover);
  --dish-listing-child-button-background-color: var(--button-secondary-background-color);
  --dish-listing-child-button-border-color: var(--button-secondary-border-color);
  --dish-listing-child-button-color: var(--button-secondary-color);
  --dish-listing-child-button-hover-background-color: var(--button-secondary-background-color-hover);
  --dish-listing-child-button-hover-border-color: var(--button-secondary-border-color-hover);
  --dish-listing-child-button-hover-color: var(--button-secondary-color-hover);
  --dish-listing-quantity-border-color: var(--form-field-border-color);
  --dish-listing-added-color: var(--color-primary);
  --dish-listing-added-trim-color: var(--color-primary);

  /* Dish listing (promoted) */
  --dish-listing-promo-background-color: var(--color-primary);
  --dish-listing-promo-color: var(--color-white);
  --dish-listing-promo-hover-box-shadow: 6px 6px 5px 0 rgba(211, 211, 211, 1);
  --dish-listing-promo-order-button-background-color: var(--color-white);
  --dish-listing-promo-order-button-border-color: var(--color-white);
  --dish-listing-promo-order-button-color: var(--color-black);
  --dish-listing-promo-order-button-hover-background-color: var(--color-secondary);
  --dish-listing-promo-order-button-hover-border-color: var(--color-secondary);
  --dish-listing-promo-order-button-hover-color: var(--color-primary);
  --dish-listing-promo-child-button-background-color: var(--color-white);
  --dish-listing-promo-child-button-border-color: var(--color-white);
  --dish-listing-promo-child-button-color: var(--color-black);
  --dish-listing-promo-child-button-hover-background-color: var(--color-secondary);
  --dish-listing-promo-child-button-hover-border-color: var(--color-secondary);
  --dish-listing-promo-child-button-hover-color: var(--color-primary);
  --dish-listing-promo-quantity-border-color: var(--color-white);
  --dish-listing-promo-added-color: var(--color-secondary);
  --dish-listing-promo-added-trim-color: var(--color-secondary);

  /* Dish listing */
  --dish-listing-background-color: var(--color-white);
  --dish-listing-border-color-mobile: #e2e2e2;
  --dish-listing-border-radius: 0;
  --dish-listing-color: var(--body-color);
  --dish-listing-hover-box-shadow: 6px 6px 5px 0 rgba(211, 211, 211, 1);
  --dish-listing-order-button-background-color: var(
    --button-primary-background-color
  );
  --dish-listing-order-button-border-color: var(--button-primary-border-color);
  --dish-listing-order-button-color: var(--button-primary-color);
  --dish-listing-order-button-hover-background-color: var(
    --button-primary-background-color-hover
  );
  --dish-listing-order-button-hover-border-color: var(
    --button-primary-border-color-hover
  );
  --dish-listing-order-button-hover-color: var(--button-primary-color-hover);
  --dish-listing-child-button-background-color: var(
    --button-secondary-background-color
  );
  --dish-listing-child-button-border-color: var(
    --button-secondary-border-color
  );
  --dish-listing-child-button-color: var(--button-secondary-color);
  --dish-listing-child-button-hover-background-color: var(
    --button-secondary-background-color-hover
  );
  --dish-listing-child-button-hover-border-color: var(
    --button-secondary-border-color-hover
  );
  --dish-listing-child-button-hover-color: var(--button-secondary-color-hover);
  --dish-listing-quantity-border-color: var(--form-field-border-color);
  --dish-listing-added-color: var(--color-primary);
  --dish-listing-added-trim-color: var(--color-primary);

  /* Dish listing (promoted) */
  --dish-listing-promo-background-color: var(--color-primary);
  --dish-listing-promo-color: var(--color-white);
  --dish-listing-promo-hover-box-shadow: 6px 6px 5px 0 rgba(211, 211, 211, 1);
  --dish-listing-promo-order-button-background-color: var(--color-white);
  --dish-listing-promo-order-button-border-color: var(--color-white);
  --dish-listing-promo-order-button-color: var(--color-black);
  --dish-listing-promo-order-button-hover-background-color: var(
    --color-secondary
  );
  --dish-listing-promo-order-button-hover-border-color: var(--color-secondary);
  --dish-listing-promo-order-button-hover-color: var(--color-primary);
  --dish-listing-promo-child-button-background-color: var(--color-white);
  --dish-listing-promo-child-button-border-color: var(--color-white);
  --dish-listing-promo-child-button-color: var(--color-black);
  --dish-listing-promo-child-button-hover-background-color: var(
    --color-secondary
  );
  --dish-listing-promo-child-button-hover-border-color: var(--color-secondary);
  --dish-listing-promo-child-button-hover-color: var(--color-primary);
  --dish-listing-promo-quantity-border-color: var(--color-white);
  --dish-listing-promo-added-color: var(--color-secondary);
  --dish-listing-promo-added-trim-color: var(--color-secondary);

  /* Dish options modal */
  --dish-options-background-color: var(--dish-listing-background-color);
  --dish-options-color: var(--dish-listing-color);

  --dish-options-close-icon-color: var(--svg-icon-fill);
  --dish-options-close-icon-hover-color: var(--svg-icon-fill-hover);

  --dish-options-heading-color: var(--dish-options-color);
  --dish-options-heading-font-family: var(--font-family-bold);
  --dish-options-heading-font-size-desktop: 17px;
  --dish-options-heading-font-size-mobile: 20px;
  --dish-options-heading-text-transform: uppercase;

  --dish-options-subheading-color: var(--dish-options-color);
  --dish-options-subheading-font-family: var(--font-family-bold);
  --dish-options-subheading-font-size-desktop: 17px;
  --dish-options-subheading-font-size-mobile: 18px;
  --dish-options-subheading-text-transform: uppercase;

  --dish-options-label-color: var(--dish-options-color);
  --dish-options-label-font-family: var(--font-family-standard);
  --dish-options-label-font-size-desktop: 15px;
  --dish-options-label-font-size-mobile: 16px;
  --dish-options-label-text-transform: uppercase;

  --dish-options-note-label-color: var(--dish-options-color);
  --dish-options-note-label-font-family: var(--font-family-medium);
  --dish-options-note-label-font-size-desktop: 14px;
  --dish-options-note-label-font-size-mobile: 14px;
  --dish-options-note-label-text-transform: none;

  --dish-options-note-field-border-color: var(--form-field-border-color);
  --dish-options-note-field-border-radius: var(--form-field-border-radius);

  --dish-options-cancel-button-background-color: var(
    --dish-listing-child-button-background-color
  );
  --dish-options-cancel-button-border-color: var(
    --dish-listing-child-button-border-color
  );
  --dish-options-cancel-button-border-radius: var(--button-border-radius);
  --dish-options-cancel-button-color: var(--dish-listing-child-button-color);
  --dish-options-cancel-button-font-family: var(--button-font-family);
  --dish-options-cancel-button-font-size-desktop: 17px;
  --dish-options-cancel-button-hover-background-color: var(
    --dish-listing-child-button-hover-background-color
  );
  --dish-options-cancel-button-hover-border-color: var(
    --dish-listing-child-button-hover-border-color
  );
  --dish-options-cancel-button-hover-color: var(
    --dish-listing-child-button-hover-color
  );

  --dish-options-order-button-background-color: var(
    --dish-listing-order-button-background-color
  );
  --dish-options-order-button-border-color: var(
    --dish-listing-order-button-border-color
  );
  --dish-options-order-button-border-radius: var(--button-border-radius);
  --dish-options-order-button-color: var(--dish-listing-order-button-color);
  --dish-options-order-button-font-family: var(--button-font-family);
  --dish-options-order-button-font-size-desktop: 17px;
  --dish-options-order-button-font-size-mobile: 17px;
  --dish-options-order-button-hover-background-color: var(
    --dish-listing-order-button-hover-background-color
  );
  --dish-options-order-button-hover-border-color: var(
    --dish-listing-order-button-hover-border-color
  );
  --dish-options-order-button-hover-color: var(
    --dish-listing-order-button-hover-color
  );

  /* Basket */
  --basket-background-color: var(--color-white);
  --basket-color: var(--color-black);
  --basket-header-back-color: var(--color-secondary);
  --basket-footer-border-color: var(--color-grey);
  --basket-decrement-color: var(--color-primary);
  --basket-increment-color: var(--color-primary);
  --basket-info-color: var(--color-grey-dark);
  --basket-options-color: #999;
  --basket-button-background-color-disabled: #c4c3c2;
  --basket-button-color-disabled: var(--color-white);
  --basket-edit-delete-icon-color: var(--color-black);

  /* Suggestions carousel */
  --suggestion-background-color: var(--color-grey);
  --suggestion-anchor-color: var(--color-secondary);
  --suggestion-control-color: var(--color-secondary);

  /* Checkout page */
  --checkout-box-background-color: var(--color-white);
  --checkout-box-border-color: var(--color-primary);
  --checkout-box-color: var(--color-black);
  --checkout-box-primary-button-background-color: var(--button-primary-background-color);
  --checkout-box-primary-button-border-color: var(--button-primary-border-color);
  --checkout-box-primary-button-color: var(--button-primary-color);
  --checkout-box-primary-button-hover-background-color: var(--button-primary-background-color-hover);
  --checkout-box-primary-button-hover-border-color: var(--button-primary-border-color-hover);
  --checkout-box-primary-button-hover-color: var(--button-primary-color-hover);
  --checkout-box-secondary-button-background-color: var(--button-secondary-background-color);
  --checkout-box-secondary-button-border-color: var(--button-secondary-border-color);
  --checkout-box-secondary-button-color: var(--button-secondary-color);
  --checkout-box-secondary-button-hover-background-color: var(--button-secondary-background-color-hover);
  --checkout-box-secondary-button-hover-border-color: var(--button-secondary-border-color-hover);
  --checkout-box-secondary-button-hover-color: var(--button-secondary-color-hover);
  --checkout-form-heading-color: var(--form-heading-color);
  --checkout-form-error-color: var(--form-error-color);
  --checkout-payment-selected-background-color: var(--color-primary);
  --checkout-payment-selected-color: var(--color-white);
  --checkout-order-type-color: var(--color-primary);

  /* Control panel page */
  --cp-anchor-color: var(--color-secondary);
  --cp-anchor-color-hover: var(--color-primary);
  --cp-icon-color: var(--color-secondary);
  --cp-icon-color-hover: var(--color-primary);
  --cp-icon-note-color: #999;


  /* +++++++++++++++++++++++++++++++++++++ */
  /*  Sabden Theme variables            */
  /* +++++++++++++++++++++++++++++++++++++ */

  /* Header */
  --header-anchor-color: var(--color-black);
  --header-logo-width-small: 200px;
  --header-logo-width-medium: 300px;
  --header-logo-width-large: 400px;
  --header-cp-icon-color: var(--color-primary);
  --header-cp-icon-color-hover: var(--color-secondary);
  --header-cp-first-name-color: var(--color-primary);
  --header-back-button-color: var(--color-secondary);

  /* Header (home page) */
  --header-home-anchor-color: var(--color-white);
  --header-home-logo-width-small: 280px;
  --header-home-logo-width-medium: 600px;
  --header-home-logo-width-large: 700px;
  --header-home-cp-icon-color: var(--color-white);
  --header-home-cp-icon-color-hover: var(--color-primary);
  --header-home-cp-first-name-color: var(--color-white);

  /* Social icons */
  --social-icon-color: var(--color-red);
  --social-icon-color-home: var(--color-white);

  /* Locator */
  --locator-background-color: var(--color-primary);
  --locator-color: var(--color-white);
  --locator-field-background-color: var(--color-grey);
  --locator-field-color: var(--color-black);
  --locator-field-placeholder-color: var(--color-grey-dark);
  --locator-button-background: var(--color-primary);
  --locator-button-color: var(--color-white);
  --locator-icon-color: var(--color-primary);
  --locator-dropdown-chevron-color: var(--color-black);
  --locator-time-color: var(--color-white);
  --locator-notification-background-color: var(--color-primary);
  --locator-notification-color: var(--color-white);
}