/*
  To apply your color theme, you need to change (or add) colors in ":root { ... }".
  __________
  Example #1: 
    The main color of your store is green.
    You need to change the color in the "--main" variable.
    Before changes:
      :root {
        --main: #1c49c2 !important;
        ...
      }
    After changes:
      :root {
        --main: #008000 !important;
        ...
      }
    For other variables and components, the logic is same.
  __________
  Example #2:
  If you change the color of the button, do not forget to change the color for the "hover" and "focus" effects.
    Before changes:
      :root {
        ...
        --btn-primary: #007bff !important;
        ...
        --btn-primary-hover: #016ee3 !important;
        --btn-outline-primary-hover: #007bff !important;
        --btn-primary-focus: rgba(0, 123, 255, 0.5) !important;
        --btn-outline-primary-focus: rgba(0, 123, 255, 0.5) !important;
        ...
      }
    After changes:
      :root {
        ...
        --btn-primary: NEW_COLOR !important;
        ...
        --btn-primary-hover: NEW_HOVER_COLOR !important;
        --btn-outline-primary-hover: NEW_COLOR !important;
        --btn-primary-focus: NEW_FOCUS_COLOR !important;
        --btn-outline-primary-focus: NEW_FOCUS_COLOR !important;
        ...
      }
  If you need more in-depth customization, you can manually change (or add) the styles for each component individually.
*/

@font-face {
  font-family: "Petfinity";
  src: url("https://cdn.franpos.com/customer-contents/206650/Petfinity-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --main: #0165fc !important;
  --white: #ffffff !important;
  --black: #000000 !important;
  --yellow: #ffc80c !important;

  --btn-primary: #0165fc !important;
  --btn-secondary: #1c49c2 !important;
  --btn-danger: #dc3545 !important;
  --btn-light: #007bff !important;
  --btn-cart: #dbebf9 !important;

  --btn-primary-hover: #2041d7 !important;
  --btn-outline-primary-hover: #2041d7 !important;

  --btn-primary-focus: rgba(0, 123, 255, 0.5) !important;
  --btn-outline-primary-focus: rgba(0, 123, 255, 0.5) !important;

  --btn-secondary-hover: #173da4 !important;
  --btn-outline-secondary-hover: #1c49c2 !important;

  --btn-secondary-focus: rgba(0, 123, 255, 0.5) !important;
  --btn-outline-secondary-focus: rgba(0, 123, 255, 0.5) !important;

  --btn-danger-hover: #c82333 !important;
  --btn-outline-danger-hover: #dc3545 !important;

  --btn-danger-focus: rgba(255, 18, 18, 0.5) !important;
  --btn-outline-danger-focus: rgba(255, 18, 18, 0.5) !important;

  --btn-light-hover: #dbebf9 !important;
  --btn-cart-hover: #dbebf9 !important;

  --btn-disabled: #dcdcdc !important;

  --sidebar-accent: #ec174d !important;
  --header-top-link-bg-hover: transparent;
  --header-bottom-link-bg-hover: transparent;
}

/*  ====== FONTS ======  */
* {
  font-family: 'Inter', sans-serif !important;
}

/* Links */
a {
  font-family: 'Inter', sans-serif !important;
}

/* Headings */
h1,
h1 span,
h1 strong,
h2,
h2 span,
h2 strong,
h3,
h3 span,
h3 strong,
h4,
h5,
h6 {
  font-family: 'Inter', sans-serif !important;
}

/* Text */
p,
span,
li,
div {
  font-family: 'Inter', sans-serif !important;
}
/*  ====== END OF FONTS ======  */

/* HEADER */
#main-header {
  background-color: #4c93fd !important;
}

#main-header-top-line {
  /* If you need to make a two-color header */
  /* background-color: var(--first-color); !important */
}

#main-header-bottom-line {
  /* If you need to make a two-color header */
  /* background-color: var(--second-color); !important */
}

/* Header links color */
#main-header a,
#main-header div {
  color: var(--black) !important;
}

#main-header .navbar-dropdown a,
#main-header .navbar-dropdown div {
  color: var(--black) !important;
}

#main-header .dropdown-tab:hover,
#main-header .selected-tab,
#main-header .selected-tab .right-arrow-img,
#main-header .category-header {
  color: var(--main) !important;
}

#main-header .category-header:hover {
  border-bottom: 1px solid var(--main) !important;
  color: var(--main) !important;
}

/* Header icons color */
#main-header img,
#main-header .burger-menu {
  /* 0% - white color, 100% - black color */
  filter: invert(90%) !important;
}

#main-header img#close-button-img,
#main-header #header-sidebar img,
#categories-content img,
img#header-logo {
  filter: invert(0%) !important;
}

#main-header #wishlist-counter,
#main-header #cart-counter {
  color: var(--white) !important;
  border: 1px solid var(--white) !important;
  background-color: #4c93fd !important;
  line-height: 1;
}

.language-option-active {
  background-color: var(--main) !important;
}

#main-header .search-input {
  border: 1px solid gray;
}

@media only screen and (min-width: 1200px) {
  #header-logo {
    max-width: 196px;
    height: 47px;
  }
}
/* END OF HEADER */

/* FOOTER */
#main-footer {
  background-color: #00327d !important;
  background-color: transparent !important;
}

/* Footer links color */
#main-footer a,
#main-footer div {
  color: var(--white) !important;
}
/* END OF FOOTER */

/* PROFILE */
.sidebar-tab.active-tab {
  background-color: var(--main) !important;
  color: var(--white) !important;
}
/* END OF PROFILE */

/* ====== BUTTONS ====== */
.button-primary {
  color: var(--white) !important;
  background-color: var(--btn-primary) !important;
  border: 1px solid var(--btn-primary) !important;
}

.button-outline-primary {
  color: var(--btn-primary) !important;
  background-color: var(--white) !important;
  border: 1px solid var(--btn-primary) !important;
}

.button-secondary {
  color: var(--white) !important;
  background-color: var(--btn-secondary) !important;
  border: 1px solid var(--btn-secondary) !important;
}

.button-outline-secondary {
  color: var(--btn-secondary) !important;
  background-color: var(--white) !important;
  border: 1px solid var(--btn-secondary) !important;
}

.button-danger {
  color: var(--white) !important;
  background-color: var(--btn-danger) !important;
  border-color: var(--btn-danger) !important;
}

.button-outline-danger {
  color: var(--btn-danger) !important;
  background-color: var(--white) !important;
  border-color: var(--btn-danger) !important;
}

.button-cart {
  color: var(--main) !important;
  background-color: var(--white) !important;
  border: 2px solid var(--btn-cart) !important;
}

.button-light {
  color: var(--btn-light) !important;
  background-color: #ffffff !important;
  border: 2px solid var(--btn-cart) !important;
}

.fixed-cart-button {
  background-color: var(--btn-primary) !important;
}

.subcategory-card {
  background-color: var(--btn-primary) !important;
}

.subcategory-card-title {
  color: #ffffff !important;
}

/* Pagination arrow color */
.button-light img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(50%) saturate(100%) hue-rotate(216deg) brightness(95%)
    contrast(50%) !important;
}

/* ====== BUTTONS EFFECTS ====== */
.button-primary:hover,
.button-primary:active {
  color: var(--white) !important;
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}

.button-outline-primary:hover,
.button-outline-primary:active {
  color: var(--white) !important;
  background-color: var(--btn-outline-primary-hover) !important;
  border-color: var(--btn-outline-primary-hover) !important;
}

.button-secondary:hover,
.button-secondary:active {
  color: var(--white) !important;
  background-color: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-hover) !important;
}

.button-outline-secondary:hover,
.button-outline-secondary:active {
  color: var(--white) !important;
  background-color: var(--btn-outline-secondary-hover) !important;
  border-color: var(--btn-outline-secondary-hover) !important;
}

.button-danger:hover,
.button-danger:active {
  color: var(--white) !important;
  background-color: var(--btn-danger-hover) !important;
  border-color: var(--btn-danger-hover) !important;
}

.button-outline-danger:hover,
.button-outline-danger:active {
  color: var(--white) !important;
  background-color: var(--btn-outline-danger-hover) !important;
  border-color: var(--btn-outline-danger-hover) !important;
}

.button-cart:hover {
  color: var(--main) !important;
  background-color: var(--btn-cart-hover) !important;
  border-color: var(--btn-cart-hover) !important;
}

.button-light:hover,
.button-light:active {
  color: var(--main) !important;
  background-color: var(--btn-cart-hover) !important;
  border-color: var(--btn-cart-hover) !important;
}

.button-light-active,
.button-light-active:hover {
  color: var(--white) !important;
  background-color: var(--btn-light) !important;
  border-color: var(--btn-light) !important;
}

.fixed-cart-button:hover,
.fixed-cart-button:active {
  background-color: var(--btn-primary-hover) !important;
}

.button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-primary-focus) !important;
}

.button-outline-primary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-outline-primary-focus) !important;
}

.button-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-secondary-focus) !important;
}

.button-outline-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-outline-secondary-focus) !important;
}

.button-danger:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-danger-focus) !important;
}

.button-outline-danger:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-outline-danger-focus) !important;
}

.button-cart:focus {
  box-shadow: 0 0 0 0.2rem var(--btn-outline-secondary-focus) !important;
}

.button-light:focus,
.button-light-active:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-primary-focus) !important;
}

.button:disabled,
.button:disabled:hover {
  color: #000000 !important;
  background-color: var(--btn-disabled) !important;
  border-color: var(--btn-disabled) !important;
}
/* ====== END OF BUTTONS ====== */

/* ====== LOADERS ====== */
.loader--primary {
  border-color: var(--white) var(--main) var(--main) !important;
}

.loader--light {
  border-color: var(--main) var(--white) var(--white) !important;
}

.loader--danger {
  border-color: var(--danger) var(--white) var(--white) !important;
}
/* ====== END OF LOADERS ====== */

/* ====== INPUTS ====== */
.custom-input-container:hover .custom-input-label,
.custom-select-container:hover .custom-select-label,
.custom-text-area-container:hover .custom-text-area-label {
  color: var(--main) !important;
}

.custom-input-container:hover .custom-input-border,
.custom-select-container:hover .custom-select-border,
.custom-text-area-container:hover .custom-text-area-border {
  border-color: var(--main) !important;
}

.custom-input-label--focus,
.custom-select-label--focus,
.custom-text-area-label--focus {
  color: var(--main) !important;
}

.custom-input-border--focus,
.custom-select-border--focus,
.custom-text-area-border--focus {
  border-color: var(--main) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--main) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(var(--main), 0.25) !important;
}

.custom-checkbox-container input:checked ~ .custom-checkbox-checkmark {
  background-color: var(--main) !important;
}

.dropdown-selected {
  color: #ffffff !important;
  background-color: var(--main) !important;
}
/* ====== END OF INPUTS ====== */

/* ====== SLIDER ====== */
.slider-image-wrapper--active {
  border-color: var(--main) !important;
}
/* ====== END OF SLIDER ====== */

/* ====== CATALOG ====== */
#catalog-mobile-search {
  background-color: var(--main) !important;
}
/* ====== END OF CATALOG ====== */

/* ====== MOBILE FOOTER ====== */
.active-footer-button {
  background-color: var(--main) !important;
  color: var(--white) !important;
}
/* ====== END OF MOBILE FOOTER ====== */

/* ======= BOOKING ====== */
.selected-service-item,
.selected-provider-item {
  border: 1px solid var(--main) !important;
}

.selected-service-checkbox,
.selected-provider-checkbox {
  background-color: var(--main) !important;
}

.class-event {
  border-color: var(--main) !important;
  color: var(--main) !important;
}

.class-event:hover,
.class-selected {
  border-color: var(--main) !important;
  color: var(--white) !important;
  background-color: var(--main) !important;
}

.booking-complete-header {
  background-color: var(--main) !important;
  color: var(--white) !important;
}
/* ======= END OF BOOKING ====== */

/* ======= CONTENT PAGES ====== */
.bee-row-content p {
  font-weight: unset;
  color: unset;
}
/* ======= END OF CONTENT PAGES ====== */

/* ======= MESSAGE BANNER ====== */
#banner-root {
  background-color: #ffffff !important;
}

#banner-text {
  color: #000000 !important;
}
/* ======= MESSAGE BANNER ====== */

/* ======= TOP BANNER ====== */
.top-banner {
  background-color: #555555 !important;
}

.top-banner a,
.top-banner div {
  color: #ffffff !important;
}

.top-banner img {
  filter: invert(0) !important;
}
/* ======= END OF TOP BANNER ====== */

#footer {
  background: linear-gradient(#347ce9, #00327d);
}

#footer a,
#footer span {
  color: white;
  text-shadow: 1px 1px 1px #00000088;
  font-weight: 600;
}

#main-footer a {
  font-family: 'Petfinity', sans-serif !important;
  font-weight: 500;
}

#footer-powered-by {
  border-top-color: #ffffff22;
}

#main-footer > div > div > div > a:first-child {
  font-size: 0;
}

#main-footer > div > div > div > a:first-child::after {
  content: '';
  display: block;
  width: 200px;
  height: 40px;
  background: url('https://d15k2d11r6t6rl.cloudfront.net/pub/mbtq/8pejejoz/077/qiu/200/Petfinity-logo-1-w.png') center / contain no-repeat;
}

#featured-products-block h2,
#astro-products h2,
.google-reviews-v2 h2 {
  text-transform: capitalize;
  color: black;
  font-size: 42px;
  font-weight: 500;
}

#footer-nav-and-social ul[class^='Social-module'] a[href*='tiktok'] img,
#footer-nav-and-social ul[class^='Social-module'] a[href*='linkedin'] img,
#footer-nav-and-social ul[class^='Social-module'] a[href*='instagram'] img,
#footer-nav-and-social ul[class^='Social-module'] a[href*='facebook'] img {
  display: none;
}

#footer-nav-and-social ul[class^='Social-module'] a[href*='tiktok']::after,
#footer-nav-and-social ul[class^='Social-module'] a[href*='linkedin']::after,
#footer-nav-and-social ul[class^='Social-module'] a[href*='instagram']::after,
#footer-nav-and-social ul[class^='Social-module'] a[href*='facebook']::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: url('https://d15k2d11r6t6rl.cloudfront.net/pub/mbtq/8pejejoz/uyg/jmx/bgm/fb.svg') center / 70% no-repeat;
  filter: invert(1);
}

#footer-nav-and-social ul[class^='Social-module'] a[href*='tiktok']::after {
  background: url('https://d15k2d11r6t6rl.cloudfront.net/pub/mbtq/8pejejoz/sf4/g2s/wx1/tt.svg') center / 60% no-repeat;
}

#footer-nav-and-social ul[class^='Social-module'] a[href*='linkedin']::after {
  background: url('https://d15k2d11r6t6rl.cloudfront.net/pub/mbtq/8pejejoz/kku/nc4/ccw/li.svg') center / 70% no-repeat;
}

#footer-nav-and-social ul[class^='Social-module'] a[href*='instagram']::after {
  background: url('https://d15k2d11r6t6rl.cloudfront.net/pub/mbtq/8pejejoz/5gk/hr3/9nq/inst.svg') center / 70% no-repeat;
}

@media only screen and (min-width: 960px) {
  #main-header {
    padding-top: 24px;
    position: relative;
    padding-bottom: 25px;
    box-shadow: none;
  }

  #main-header-top-line,
  #main-header-bottom-line  {
    max-width: 1120px;
    margin-inline: auto;
  }

  #main-header-top-line{
    padding: 7px 15px 7px 33px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    right: 0;
    z-index: 50;
    max-width: 95%;
  }

  #main-header-bottom-line  {
    position: relative;
    padding-top: 61px;
    z-index: 1;

    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .search-input,
  .search-categories {
    max-height: 40px !important;
  }

  .search-categories {
    border-right: 1px solid #b3b3b3 !important;
  }

  .search-input {
    margin: 0 10px 0 50px !important;
  }

  .search-categories:hover,
  .search-categories:has(li) {
    border: inherit;
    border-left: none !important;
  }

  #main-header::after{
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 80px;
    z-index: 0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C250,140 450,140 650,80 C900,0 1050,10 1200,60 L1200,140 L0,140 Z' fill='%23ffffff'/%3E%3C/svg%3E")
    no-repeat bottom center / 100% 100%;
  }

  body:has(main#cart-page) #main-header::after,
  body:has(main#wishlist-page) #main-header::after,
  body:has(main#offers-page) #main-header::after,
  body:has(main#cart-page) #main-header::after {
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C250,140 450,140 650,80 C900,0 1050,10 1200,60 L1200,140 L0,140 Z' fill='%23eeeeee'/%3E%3C/svg%3E")
    no-repeat bottom center / 100% 100%;
  }

  #main-header::before{
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
  }

  @supports (animation-timeline: view()) {
    @media only screen and (max-width: 1200px) {
      #main-header-bottom-line {
        animation: hide 1s ease both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
    }

    #main-header::before{
      animation: overlay 1s ease both;
      animation-timeline: view();
      animation-range: exit 0% exit 80%;
    }

    @keyframes overlay{
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes hide {
      from {
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      to {
        opacity: 0;
        transform: translateY(-30px);
        pointer-events: none;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #main-header-bottom-line,
    #main-header::before {
      animation: none !important;
    }
  }

  #main-header #wishlist-counter,
  #main-header #cart-counter {
    text-shadow: 1px 1px 1px #393939;
    height: 23px;
    width: 23px;
    border: 2px solid var(--white) !important;
  }

  #catalog-page [class^='DesktopSidebar-module__'][class*='__sidebar'],
  #cart-page #totals-block,
  #checkout-page [class^='CheckoutComponent-module__'][class*='__checkoutItems'] {
    top: 100px !important;
  }
}

@media only screen and (min-width: 1200px) {
  #main-header-top-line{
    max-width: 1120px;
  }

  #main-header {
    padding-bottom: 135px;
  }
}

@media only screen and (max-width: 960px) {
  #main-header{
    padding: 3px 0 0;
  }
  
  #main-header-top-line{
    background-color: #fff;
    border-radius: 50px;
    padding: 0 10px;
  }

  #featured-products-block h2,
  #astro-products h2,
  .google-reviews-v2 h2 {
    font-size: 32px;
  }
}

#home-page #contact-us .contact-info.contact-info-email a {
  display: none;
}

#home-page #contact-us .contact-info.contact-info-email::after {
  content: 'ecommerce@petfinity.ca';
}

#home-page #contact-us > div > div > h2 {
  font-size: 0;
}

#home-page #contact-us > div > div > h2::after {
  content: 'Contact & Hours';
  font-size: 32px;
}

#home-page #contact-us .contact-info-list > li:nth-of-type(1),
#home-page #contact-us .contact-info-list > li:nth-of-type(2),
#home-page #contact-us .contact-info-list > li:nth-of-type(5) {
  display: none;
}

#home-page #contact-us .contact-info-list {
  display: flex;
  flex-direction: column-reverse;
}

#footer > #main-footer > div,
#footer > #footer-nav-and-social > div,
#footer > #footer-powered-by > div {
  max-width: 1168px;
}

main > div:not(#cart-popup) {
  max-width: 1168px;
}

#product-page [class^='FullscreenImage-module__'][class*='__imageModal'],
main#home-page > div {
  max-width: unset !important;
}

#offers-page h2 {
  font-family: 'Petfinity', sans-serif !important;
  text-transform: uppercase;
}

@media (min-width: 991px) {
  [class^='AstroOffersComponent-module__'][class*='__offersModalImageWrapper'],
  [class^='ProductsListBlock-module__'][class*='__offersModalImageWrapper'] {
    height: 400px;
  }
}

@media (min-width: 1200px) {
  .modal-xl:has([class^='AstroOffersComponent-module__']),
  .modal-xl:has([class^='ProductsListBlock-module__'][class*='__offersModalBody']) {
    --bs-modal-width: 1000px;
  }
}

@media (max-width: 960px) {
  .bg-white.modal-title.h4 {
    font-size: 18px;
  }
}

#featured-products-block h3:first-of-type {
  text-align: center;
}

#featured-products-block .prod-price > p {
  font-size: 0 !important;
  visibility: hidden;
}

#featured-products-block .prod-price > p > span {
  font-size: 16px;
  visibility: visible;
}

#featured-products-block .prod-meta > a {
  color: var(--main);
}

@media only screen and (min-width: 1200px) {
  #main-header-bottom-line{
    position: fixed;
    padding: 7px 0 !important;
    position: fixed;
    top: 25px;
    left: 0;
    right: 16%;
    z-index: 50;
    width: max-content;
  }

  #main-header-bottom-line .nav-link {
    padding-inline: 12px !important;
    line-height: 1;
  }

  #main-header-bottom-line .shop-nav-link {
    padding-right: 0px !important;
  }

  #user-icon .nav-link,
  #wishlist-icon > div,
  #cart-icon > div:nth-of-type(2),
  #user-icon [class^='UserComponent-module__'][class*='__text'] {
    display: none !important;
  }

  #user-icon > a,
  #user-icon > div,
  #wishlist-icon,
  #cart-icon {
    padding-inline: 10px !important;
  }

  #cart-counter {
    margin-left: 15px;
  }

  #header-sidebar {
    flex-grow: 0;
    flex-basis: 350px;
    max-width: 350px;
    margin-left: 36% !important;
  }
}

@media only screen and (min-width: 1900px) {
  #main-header-bottom-line{
    right: 10%;
  }
}

#main-header-bottom-line .nav-link {
  transition: color ease 0.5s;
}

#main-header-bottom-line .nav-link:hover {
  color: var(--main) !important;
}

[test-info="return-to-previous-page-button"] {
  top: 100px;
}

.brands-nav-link {
  display: none;
}