@import "reboot.scss";
@import "variables";
@import "mixins";
@import "grid.scss";
:root {
  --header-height: 0; // this is set by js in header plugin
}

html {
  scroll-padding-top: var(--header-height);
  font-size: 62.5% * $zoom_factor; // font size to match 1rem = 10px
}

html,
body {
  height: 100%;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  #main {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    main {
      flex: 1 0 auto;
    }
    #footer,
    #copyright {
      flex-shrink: 0;
    }
  }
}

body {
  margin: 0;
  font-family: $font-family;
  background-color: $col-bg;
  // *:hover {
  //   border-color: red !important;
  //   background-color: rgba(red, 0.4) !important;
  // }
}

h1 {
  @include h1;
}

h2 {
  @include h2;
}

h3 {
  @include h3;
}

h4 {
  @include h4;
}

h5 {
  @include h5;
}

h6 {
  @include h6;
}

p {
  @include p;

  &.small,
  &.sm {
    @include p-small;
  }
  &.large,
  &.lg {
    @include p-large;
  }
}

hr {
  border: 0 solid $gray200;
  border-top-width: $hr-border-w;
}

// BUTTONS

.button,
button:not(.gbtn):not([class*="plyr"]) {
  @include button;
  outline: none;
  &.disabled {
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
  }
}

.button-outline {
  @include button-outline;
}

a,
.link {
  @include link;
}

// INPUTS

input:not([type="checkbox"]):not([type="radio"]):not(.minus):not(.plus):not(
    .qty
  ),
input[type="date"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="select"],
input[type="button"],
select,
textarea {
  @include input;
}

label.inplace-label {
  @include inplace-label;
}

// MENU

.sticky-side-menu {
  position: -webkit-sticky !important; /* Safari */
  position: sticky !important;
  top: 0;
  display: flex;
  flex-flow: column nowrap;
  @include bp("md") {
    padding: 0;
    position: static !important;
    &.active {
      position: fixed !important;
      top: 0;
    }
  }

  .sticky-side-menu-item {
    font-size: $fs-sticky-menu;
    display: block;
    list-style: none;
    background-image: none;
    background-repeat: none;
    background-position: 0;
    transition: background-color 0.5s ease-in-out;

    &:hover {
      background-color: $gray100;
    }

    &:active {
      background-color: $gray300;
    }

    a {
      color: inherit;
      text-decoration: none;
      font-weight: $fw-regular;

      display: inline-block;
      width: 100%;
      padding: (1rem * 1.6) (2rem * 1.6);
      @include bp("md") {
        padding: (1rem * 1.6) (1rem * 1.6);
      }
    }
  }
}

// IMAGES

img {
  object-fit: contain;
  height: auto;
}

// NEWSLETTER
.newsletter-form {
  position: relative;

  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: $popup-overlay;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
  }

  .message {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
  }

  .error-message {
    color: $col-danger;
  }

  &.loading {
    .overlay {
      opacity: 0.8;
      visibility: visible;
    }
  }

  &.fail {
    .error-message {
      opacity: 1;
      max-height: 50rem;
      color: $col-danger;
    }
  }

  &.success {
    .success-message {
      opacity: 1;
      color: $col-success;
      max-height: 50rem;
    }
  }
}

#cart-wrapper {
  .empty-cart-wrapper,
  .empty-cart-wrapper .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    h3,
    p {
      margin: 0 !important;
      text-align: center;
    }
    .text-wrapper {
      gap: 0.2rem !important;
      h3 {
        font-weight: $fw-semi;
      }
      p {
        color: $gray700;
        font-weight: 500;
      }
    }
    .button {
      margin-bottom: 1.6rem;
      @include bp(md) {
        width: 100%;
      }
    }
    .category-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.8rem;
      width: 100%;
      @include bp(md) {
        grid-template-columns: repeat(2, 1fr);
      }
      .category-item a {
        background-color: $white;
        border-radius: 4px;
        padding: 0.8rem 1.6rem;
        box-shadow: 0 0.5px 4px 0 hsla(236, 8%, 41%, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        transition: 0.3s;
        height: 100%;
        @include bp(md) {
          padding: 0.8rem;
          font-size: $fs-small;
        }
        &:hover {
          text-decoration: none;
          background-color: $gray100;
        }
        * {
          text-align: center;
        }
        .img-wrp {
          width: 32px;
          height: 32px;
          min-width: 32px;
          min-height: 32px;
          position: relative;
          @include bp(md) {
            display: none;
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }
  }
  &.popup {
    .close-btn {
      margin: 2rem;
      padding: 1rem 1.2rem 1.2rem 1.2rem;
      border-radius: 100%;
      @include bp("sm") {
        margin: 1rem;
      }
      &:hover {
        color: $white;
        border-color: $col-prm;
      }
    }
    .content {
      position: relative;
      padding: $space-sm;
      @include bp("sm") {
        padding: $space-xs;
      }
      h3 {
        margin-bottom: $space-sm;
      }
      .woocommerce-notices-wrapper {
        position: static;
        margin-left: 0;
      }
      .woocommerce-cart-form {
        table {
          width: 100%;
          border: none;
          margin: 0;
          thead {
            display: none;
          }
          tbody {
            display: flex;
            flex-direction: column;
            row-gap: 1rem;
            max-height: calc(90vh - 400px);
            overflow-y: scroll;
            @include bp("sm") {
              row-gap: 3rem;
            }
            td.actions {
              border: none;
              padding: 0;
            }
            > .cart_item {
              position: relative;
              display: grid;
              grid-template-columns: 5rem auto 8rem 15rem 30px;
              grid-column-gap: 1rem;
              column-gap: 1rem;
              row-gap: 2rem;
              align-items: center;
              @include bp("lg") {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
              }
              .product-remove {
                order: 99;
                min-width: auto;
                padding-left: 0.4rem;
                @include bp("lg") {
                  position: absolute;
                  right: 0;
                  top: 0;
                  padding-right: 0;
                }
              }
              .product-thumbnail {
                padding: 0;
                @include bp("lg") {
                  display: none;
                }
                img {
                  height: auto;
                }
              }
              .product-name {
                padding: 0;
                @include bp("lg") {
                  grid-column: 1 / span 2;
                  padding-right: 3rem;
                }
              }
              .product-price {
                display: none;
              }
              .product-quantity {
                @include product-quantity;
                max-width: unset;
                @include bp("lg") {
                  max-width: fit-content;
                }
                .quantity {
                  padding: 0;
                  input {
                    font-size: 14px;
                  }
                }
              }
              .product-subtotal {
                text-align: right;
              }
              td {
                border: none !important;
              }
            }
          }
        }
      }
      .cart-buttons {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: $space-xs;
        background: $col-bg;
        padding-top: $space-md;
        border-top: 1px solid $gray200;
        @include bp("md") {
          flex-direction: column;
          row-gap: 2rem;
        }
        .button {
          text-align: center;
          max-width: 50%;
          border-radius: 0;
          margin: 0;
          @include button;
          font-size: 2rem;
          &.button-outline {
            @include button-outline;
            border-radius: 0;
            font-size: 2rem;
          }
          @include bp("md") {
            width: 100%;
            max-width: 100%;
          }
        }
      }
    }
  }
}

.socials {
  .social-icon {
    display: inline-block;
    height: 2.4rem;
    transition: 0.3s;
    &:hover {
      transform: scale(1.05);
      transition: 0.4s;
    }
  }
  &.icons {
    a {
      padding-right: 1.8rem;
    }
    .social-icon {
      vertical-align: middle;
      &.social-icon-facebook {
        height: 2rem;
      }
    }
  }
  &.buttons {
    .button-outline {
      margin: (0.5rem * 1.6) 1.4rem (0.5rem * 1.6) 0;
    }
  }
}

.popup .wrp ul {
  &.woocommerce-error {
    padding: (2rem * 1.6) (3rem * 1.6);
    border-top-color: $col-danger !important;
    &::before {
      color: $col-danger !important;
    }
  }

  &.woocommerce-info {
    padding: (2rem * 1.6) (3rem * 1.6);
    border-top-color: $col-warn !important;
    &::before {
      color: $col-warn !important;
    }
  }

  &.woocommerce-message {
    padding: (2rem * 1.6) (3rem * 1.6);
    border-top-color: $col-success !important;
    &::before {
      color: $col-success !important;
    }
  }
}

.spinner {
  @include spinner;
}

.woocommerce .select2-selection[role="combobox"] {
  @include input;
  height: auto;
  .select2-selection__rendered {
    padding: 0;
    line-height: normal;
  }
  .select2-selection__arrow {
    height: 100%;
  }
}

// Remove arrows from input type number
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.woocommerce-notices-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  max-width: fit-content;
  width: 100%;
  z-index: 999;
  margin: 3rem 2rem;
  .woocommerce-error,
  .woocommerce-info,
  .woocommerce-message {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    border-radius: 16px;
    color: $white;
    font-family: $font-family;
    font-size: 1.4rem;
    margin-bottom: 0;
    border: none;
    li {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
    &::before {
      color: rgb(255, 255, 255);
      position: absolute;
      top: 50%;
      left: 1.5em;
      transform: translateY(-50%);
    }
    a.button {
      font-family: $font-family;
      font-weight: $fw-semi;
      margin-left: 4rem;
      color: $gray900;
      background-color: $white;
      min-width: fit-content;
      border-radius: 100px;
      &:hover {
        background-color: $col-prm;
        color: $white;
      }
    }
  }
  .woocommerce-message {
    background: $col-success;
  }
  .woocommerce-error {
    background: $col-danger;
  }
  .woocommerce-info {
    background: $col-warn;
  }
}
.container.empty-cart {
  margin-top: $space-lg;
  margin-bottom: $space-lg;
  a.button.wc-backward {
    @include button;
  }
}

.price-strike {
  @include price-strike;
}

.sticky-bottom {
  @include sticky-bottom;
}
