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

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

@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-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-black';
  src: url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-black.woff2')
      format('woff2'),
    url('../../../Global_Theme/fonts/gothamhtf/gothamhtf-black.woff')
      format('woff');
}

:root {
  /* ++++++++++++++++++++++++++++++++++++++ */
  /*  Colors                                */
  /* ++++++++++++++++++++++++++++++++++++++ */

  --color-black: #000;
  --color-white: #fff;
  --color-grey-dark: #666;
  --color-grey-light: #f3f3f3;

  --color-primary: #000000;
  --color-secondary: #ce1126;
  --color-tertiary: #ce1126;

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

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

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

  /* Body */
  --body-background-color: var(--color-black);
  --body-color: var(--color-white);
  --body-font: var(--font-family-standard);

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

  /* Header */
  --header-background-color: var(--color-primary);

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

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

  /* Buttons */
  --button-border-radius: 8px;
  --button-font-family: var(--font-family-bold);

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

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

  /* 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-tertiary);
  --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-tertiary);

  /* 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-tertiary);
  --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-tertiary);
  --promo-slide-4nth-color: var(--color-white);

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

  --home-categories-heading-color: var(--home-categories-color);
  --home-categories-heading-font-family: var(--font-family-bold-italic);
  --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: 15px;
  --home-category-border-width-mobile: 0;
  --home-category-border-width-desktop: 0;
  --home-category-color: var(--color-primary);
  --home-category-overlay-color: rgba(0, 0, 0, 0.4);

  --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: uppercase;

  --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-light);
  --order-page-color: var(--body-color);

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

  /* Order page dish categories */
  --dish-category-heading-color: var(--color-secondary);
  --dish-category-description-color: var(--color-black);

  /* Dish listing */
  --dish-listing-background-color: var(--color-white);
  --dish-listing-border-color-mobile: var(--color-grey-light);
  --dish-listing-border-radius: 10px;
  --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: var(--color-grey-dark);
  --basket-button-background-color-disabled: #c4c3c2;
  --basket-button-color-disabled: var(--color-white);
  --basket-edit-delete-icon-color: var(--color-black);
  --basket-voucher-color: var(--color-primary);

  /* 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-tertiary);
  --cp-anchor-color-hover: var(--color-primary);
  --cp-icon-color: var(--color-tertiary);
  --cp-icon-color-hover: var(--color-primary);
  --cp-icon-note-color: var(--color-grey-dark);

  /* +++++++++++++++++++++++++++++++++++++ */
  /*  Ramsbottom Theme variables           */
  /* +++++++++++++++++++++++++++++++++++++ */

  /* Header */
  --header-background-color: var(--color-primary);
  --header-box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);
  --header-logo-border-radius: 15px;
  --header-anchor-color: var(--color-tertiary);
  --header-cp-icon-color: var(--color-tertiary);
  --header-cp-icon-hover-color: var(--color-secondary);
  --header-cp-first-name-color: var(--color-tertiary);
  --header-nav-toggle-icon-color: var(--color-secondary);
  --header-nav-toggle-icon-background: var(--color-primary);
  --header-back-button-color: var(--color-white);

  /* Footer */
  --footer-background-color: var(--color-secondary);
  --footer-color: var(--color-primary);
  --footer-contact-text-transform: uppercase;
  --footer-social-icon-background-color: var(--color-primary);
  --footer-social-icon-background-color-hover: var(--color-primary);
  --footer-social-icon-color: var(--color-secondary);
  --footer-social-icon-color-hover: var(--color-tertiary);

  /* Home page hero */
  --home-hero-background-image: url('/App_Themes/www2830foodoocouk/img/home_hero.jpg');
  --home-hero-color: var(--color-white);
  --home-hero-button-background-color: var(--color-primary);
  --home-hero-button-background-color-hover: var(--color-tertiary);
  --home-hero-button-color: var(--color-secondary);
  --home-hero-button-color-hover: var(--color-white);
  --home-hero-button-border-color: var(--color-primary);
  --home-hero-button-border-color-hover: var(--color-tertiary);

  /* Home page subtitles */
  --home-subtitle-background-color: var(--color-primary);
  --home-subtitle-color: var(--color-secondary);
}