/*------------------------------------*\
  #Root
\*------------------------------------*/

:root {
  --Primary-color: #D6006D;
  --Secondary-color: #282559;

  --Tertiary-color: #4DC0DF;
  --Tertiary-light-color: #4DC0DF24;

  --Accent-yellow-color: #FEC800;
  --Accent-orange-color: #F39200;

  --Text-color: var(--Secondary-color);
  --Button-color: #D6006D;
  --Button-hover-color: #c90067;

  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: #1F292E;
  --Gray-color: #C5C5C5;

  --Danger-color: #D41121;
  --Danger-hover-color: #d21121;
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/
/* General */
/* Typography */

/* Buttons */
.catfish-button,
.button,
a {
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

html:not(.page-dynamicproduct-editor)  .catfish-button:not(.is-danger, .is-outlined, #deleteall, #continueshoppingDummy, .changepasswordbutton) {
  background-color: var(--Button-color);

  &:hover,
  &:focus,
  &:active {
    background-color: var(--Button-hover-color) ;
    box-shadow: unset;
  }
}

#billing-buttons-container .back-link .catfish-button{
  background-color: transparent !important;
  border: 2px solid var(--Secondary-color);
  color: var(--Secondary-color);

  &:hover{
    background-color: var(--Secondary-color) !important;
    color: var(--White-color);
  }
}

#deleteall {
  background-color: var(--Danger-color);

  &:hover {
    background-color: var(--Danger-hover-color);
  }
}

#continueshoppingDummy,
.is-outlined {
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  border-color: var(--Button-color);
  color: var(--Button-color);

  &:hover {
    border: 2px solid var(--Button-hover-color);
    background-color: var(--Button-hover-color) !important;
    color: #fff;
  }
}

/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/
.has-background-custom-1 {
  background: rgb(40, 37, 89);
  background: linear-gradient(45deg, rgba(40, 37, 89, 1) 25%, rgba(77, 192, 223, 1) 97%);
}

.has-border-top-columns .columns{
  padding-top: 1.5rem;
  border-top: 2px solid var(--Primary-color);
}

@media screen and (max-width: 1087px) {
  .is-flex-direction-tablet .columns{
    flex-direction: column-reverse;
  }
}

.overlay{
  position: relative;

  &::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
  }
}

/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/

/* Product card */

/* Homepage */
.sub-category-grid .listWrapper .item-box,
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item {
  border-top: unset;
  border-bottom: .75rem solid;
}

.sub-category-grid .listWrapper .listItem:nth-child(1) .item-box,
.homeFeaturedCategoriesWrapper .listWrapper .listItem:nth-child(1) .small-product-item {
  border-bottom-color: var(--Primary-color);
}

.sub-category-grid .listWrapper .listItem:nth-child(2) .item-box,
.homeFeaturedCategoriesWrapper .listWrapper .listItem:nth-child(2) .small-product-item {
  border-bottom-color: var(--Accent-yellow-color);
}

.sub-category-grid .listWrapper .listItem:nth-child(3) .item-box,
.homeFeaturedCategoriesWrapper .listWrapper .listItem:nth-child(3) .small-product-item {
  border-bottom-color: var(--Accent-orange-color);
}

.sub-category-grid .listWrapper .listItem:nth-child(4) .item-box,
.homeFeaturedCategoriesWrapper .listWrapper .listItem:nth-child(4) .small-product-item {
  border-bottom-color: var(--Tertiary-color);
}

.sub-category-grid .listWrapper .item-box .sub-category-item .category-title a,
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .product-title a {
  color: var(--Secondary-color);
  font-weight: 600;
}

.sub-category-grid .listWrapper .item-box .sub-category-item .category-title,
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .product-title {
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      padding: 1.5rem .5rem 1.5rem .5rem;
  }

  .sub-category-grid .listWrapper .item-box .sub-category-item .category-title{
      background: rgba(255,255,255,0.9);
  }


.catfish-default-product-box .product-title a,
.homeFeaturedProductsWrapper .listWrapper .listItem .item-box .catfish-default-product-box .product-title a {
  color: var(--Secondary-color);
  font-weight: 600;
}

@media screen and (max-width: 1279px) and  (min-width: 1088px) {
  & .listItem{
      width: 33.333333% !important;
  }
}

@media screen and (max-width: 475px) {

  & .listItem{
      width: 100% !important;
  }
}


/* Delivery Countdown */
#delivery-countdown-banner {
  background-color: var(--Tertiary-color);
  color: var(--Text-color);

  .title,
  .subtitle {
    color: var(--Text-color);
  }
}

/* Accordion */
.accordion-columns{
  
  .button.is-rounded{
      border-radius: 0 !important ;
  }

  .button{
      color: var(--Secondary-color);
      background-color: transparent;
      border-bottom: 1px solid var(--Gray-color);

      &:active,
      &:hover,
      &:focus{
          background-color: var(--Tertiary-light-color);
          color: var(--Secondary-color);
          box-shadow: unset;
      }
  }

  i.has-text-dark{
      color: var(--Primary-color) !important;
  }
}

.ict-accordion .accordion-item.is-active .accordion-content{
  padding-bottom: 1rem;
}

/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/
.navbar {

  .is-header-logo {
    height: 2rem;
  }

  a.navbar-item,
  a.navbar-link {
    font-size: 0.8333333333333333rem;
    font-weight: 600;
  }

  .navbar-link:not(.is-arrowless)::after {
    border-color: var(--Primary-color);
  }

  .navbar-dropdown a.navbar-item {
    font-weight: 400;
  }

  .navbar-dropdown a.navbar-item:hover {
    background-color: var(--Tertiary-light-color);
    color: var(--Button-color);
  }

  .buttons {

    .button {
      background-color: transparent;
      font-size: 1em;
    }

    .button.is-small {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .button i {
      font-size: 1em;
      color: var(--Primary-color);
      font-weight: 500;
    }

    .button:hover i,
    .button:focus i,
    .button:active i {
      font-weight: 700;
    }
  }

  @media screen and (min-width: 1088px) {
    .navbar-start {
      margin-left: auto;
    }

    .navbar-end {
      margin-left: unset;
    }

    .navbar-dropdown.first-column,
    .navbar-dropdown.second-column {
      left: -4.4rem;
    }

    .navbar-item.has-two-dropdowns .first-column {
      width: 10rem;
    }

    .navbar-item.has-two-dropdowns .second-column {
      margin-left: 100%;
      margin-left: 149%;
      width: 10rem;
    }

    .navbar-item.has-two-dropdowns .navbar-dropdown.second-column {
      border-left: solid 1px var(--Black-color);
    }
  }

  /* Tablet */
  @media screen and (max-width: 1087px) {
    .navbar-brand .navbar-right-mobile {

      .navbar-item {
        padding: 0.5rem 1rem;
      }

      i {
        font-size: 1.111111rem;
        color: var(--Primary-color);
        font-weight: 500;
      }
    }
  }
}

.arone-footer {
  padding-bottom: 3rem;

  a {
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: .3s;
    text-underline-offset: 0.25rem;

    &:hover {
      color: inherit;
      text-decoration: underline !important;
    }
  }

  .image.dedicated-footer-logo img {
    height: 8.5rem;
  }

  .footer-copyright {
    margin-top: 3rem;
    text-align: center;
  }

  @media screen and (min-width: 1088px){
      .dedicated-footer-logo {
          display: flex;
          justify-content: center;
      }
  }

  @media screen and (max-width: 1087px) and (min-width: 768px){
      .ict-social-links.is-justify-content-center{
          justify-content: flex-start !important;
      }
  }

  @media screen and (max-width: 767px) {

    .column:not(:first-child),
    ul.ict-list {
      text-align: center !important;
    }

    .dedicated-footer-logo {
      display: flex;
      justify-content: center;
    }
  }
}

/* Sections */
@media screen and (max-width: 1087px){
  section.additional-description-section,
  section.related-products-section,
  .block.block-account-navigation,
  .account-page{
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
  }
}

@media screen and (max-width: 767px){
  section.section.is-large,
  .homeFeaturedProductsWrapper,
  .ict-dedicated-footer{
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
  }

  section.additional-description-section,
  section.related-products-section,
  .block.block-account-navigation,
  .account-page{
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
  }
}

/*------------------------------------*\
  #ADMIN PAGES
\*------------------------------------*/
/* Login */
#contentiInnerRow:has(.login__wrapper){
  background-image: url("/stramongatepress/CF/Scales/GetFile?identifier=0e838c1c-a3e6-4743-ab58-2c3689acd784&contextId=5");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.login__wrapper .returning-wrapper .returning-wrapper__inner{
  background: #F2F2F3;

  .catfish-input{
    border-color: var(--Gray-color);
  }
}

/* Homepage */
.homebanners {

  .flexslider.infigo-slider .flex-direction-nav a::before {
    color: var(--Gray-color);
  }

  .flexslider.infigo-slider .flex-control-paging li a{
    background: var(--White-color);
    border: 2px solid var(--Gray-color);
  }

  .flexslider.infigo-slider .flex-control-paging li a.flex-active{
    background: var(--Secondary-color);
    border: 2px solid var(--Secondary-color);
  }

  @media screen and (max-width: 767px) {

    .columns {
      display: flex;
      justify-content: center !important;
    }

    .column {
      text-align: center;
    }
  }
}

/* Product Landing */

/* Product Attributes */
.arone-product-landing-page .attribute label.button{
  color: var(--Primary-color);
  border: transparent;

  &:hover{
    background-color: var(--Tertiary-light-color);
    color: var(--Primary-color)
  }
}

/* Mega Edit */
.loadingScreen .loadingLogo::before,
.addtoBasketScreen .addtoBasketScreenContainer>h1::before {
  content: "";
  /* Change the mega edit image here using the same naming structure on CSS  override */
  background: url("/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/ME-Logo.png");
  width: 20rem;
  height: 50%;
  position: absolute;
  top: -4rem;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.addtoBasketScreen .addtoBasketScreenContainer>h1::before {
  transform: translateX(-5rem);
}

.loadingScreen .loadingSpinner,
.addtoBasketScreen .loadingSpinner {
  position: relative;
  top: 5rem;
}

.loadingScreen .loadingLogo .loadScreenStepIndicator,
.addtoBasketScreen .loadingArea__loadScreenStepIndicator {
  font-size: 1.5rem;
  margin-top: 2rem;
}

.loadingScreen .fa-cog,
.addtoBasketScreen .fa-cog {
  height: 10rem !important;
  width: 10rem !important;
}

.loadingScreen .ME_loading_hints ul li,
.addtoBasketScreen .ME_loading_hints ul li {
  background: var(--White-color);
  color: var(--Text-color);
  border: solid 1px var(--Secondary-color);
}

.addtoBasketScreen #addToBasketScreenMsg {
  color: var(--Secondary-color);
}

@media screen and (max-width: 1087px) {
  .loadingScreen .loadingLogo::before {
    width: 30rem;
    height: 70%;
  }
}

.ui-dialog {
  .ui-dialog-titlebar {
    background-color: var(--Primary-color);
    border-bottom: 1px solid var(--Primary-dark-color);

    .ui-dialog-title {
      color: var(--White-color);
    }
  }

  .ui-dialog-buttonpane {
    background-color: var(--White-color);
    border-top: 1px solid #C5C5C561;
  }
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon:hover {
  background-color: var(--Tertiary-color);
}

.ui-dialog.dialogGeneralConfirm .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button:first-child {
  background-color: var(--Button-color);
  border-color: var(--Button-color);
  color: var(--White-color);
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -ms-transition: .2s;
  -o-transition: .2s;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  background-color: transparent;
  border: 2px solid var(--Button-color);
  color: var(--Button-color);
  transition: .2;
  -webkit-transition: .2;
  -moz-transition: .2;
  -ms-transition: .2;
  -o-transition: .2;
}

.ui-dialog.dialogGeneralConfirm .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-hover:first-child {
  background-color: var(--Button-hover-color);
  border-color: var(--Button-hover-color);
  color: var(--White-color);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-state-hover {
  background-color: var(--Button-hover-color);
  color: var(--White-color);
}

/* Category Page */
/* General */
.pager {
  margin-top: 1.5rem;
}

/* Basket Pages */
.shoppingcart__wrapper .cartform .cartTableWrapper .cart tr.cart-item-row,
.one-page-checkout .cartTableWrapper .cart tr.cart-item-row {
  background: #F2F2F3;
  box-shadow: 0 2px 2px rgba(197, 197, 197, 0.4);
}

html:not(.page-dynamicproduct-editor) #applydiscountcouponcode.catfish-button:not(.is-danger, .is-outlined, #deleteall, #continueshoppingDummy, .changepasswordbutton) {
  background-color: var(--Tertiary-color);
  color: var(--Secondary-color);

  &:hover {
    background-color: var(--Secondary-color);
    color: var(--White-color);
  }
}

/*------------------------------------*\
 #CHECKOUT STEPS
\*------------------------------------*/

/*------------------------------------*\
 #MY ACCOUNT PAGES
\*------------------------------------*/

/*------------------------------------*\
 #TOPIC PAGES
\*------------------------------------*/
@media screen and (max-width: 1440px) {
  .section.has-background-image.has-background-original {
    background-size: 50%;
    background-position: bottom right;

    .ict-space{
      display: none;
    }
  }
}

@media screen and (max-width: 767px) {
  .section.has-background-image.has-background-original {
    background-image: unset !important;
  }
}