collectplus.scss.liquid

$light-border-color: #DDDDDD;
$text-color: #000000;
$primary-color: #000000;
$button-text-color: #FFFFFF;
$content-background-color: #FFFFFF;
$tab-background-color: #FFFFFF;
$button-radius: 3px;
$question_mark_bg_colour: #000000;
$question_mark_text_colour: #FFFFFF;
$postcode-input-bg-colour: #F1F1F1;

#collectplus-widget {
  :focus {
    outline: none!important;
    box-sizing: border-box;
  }
  #collectplus-widget-inner {
    float: right;
    width: 100%;

    #collectplus-header {
      margin-bottom: 10px;
      
      span {
        font-size: 15px;
        font-weight: 600;
        border-bottom: 2px solid $light-border-color;
        text-align: center;
        display: inline-block;
        width: 100%;
        padding-bottom: 10px;
      }
    }

    #collectplus-tabs {
      padding: 0;
      margin-top: 0;
      margin-bottom: 20px;

      li {
        list-style: none;
        display: inline-block;
        width: 48%;

        a {
          display: block;
          font-size: 14px;
          position:relative;
          background: $tab-background-color;
          width: 100%;
          text-decoration: none;
          border: 1px solid $light-border-color;
          text-align: center;
          border-radius: $button-radius;
          padding: 5px 5px 5px;
          font-weight: 600;
          color: inherit;
          letter-spacing: 0.02em;

          &.active-tab-header {
            background: $primary-color;
            color: $button-text-color;
            border: 1px solid $primary-color;
          }

          .collect-plus-info {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            padding: 0;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            color: $question_mark_text_colour;
            background-color: $question_mark_bg_colour;
            line-height: 14px;
            font-size: 0.8em;
            font-style: normal;

            &:after {
              position: absolute;
              content: 'Collect your order at your convenience, from your choice of over 7000 CollectPlus points across the UK';
              background-color: rgba(0,0,0,0.8);
              width: 200px;
              padding: 10px;
              border-radius: 5px;
              font-size: 0.9em;
              right: calc(100% + 15px);
              top: 50%;
              transform: translateY(-50%);
              letter-spacing: .1em;
              font-weight: 500;
              line-height: 1.7em;
              opacity: 0;
              display: none;
              transition: opacity .25s ease-in-out .1s;
            }

            &:hover:after {
              opacity: 1;
              display: block;
            }

            &.selected-shipping-method {
              color: #000;
              background-color: #fff;
            }

            &.selected-shipping-method:hover:after {
              color: #fff;
            }
          }
        }
        &:last-child {
          margin-left: 4%;
        }
      }
    }

    #tab-content {

      .hidden-cp-content {
        display: none;
      }

      #delivery-content {

      }

      #collectplus-content {

        h3 {
          font-size: 12px;
          padding: 10px;
          margin-bottom: 10px;
          text-align: center;
          border-bottom: 1px solid $light-border-color;
          text-transform: uppercase;
          letter-spacing: 0.02em;
          font-weight: 600;
        }

        > h3 {
          text-align: left;
          padding: 0;
          font-size: 1.3em;
          border: none;
        }

        #selected-explaination {
          text-align: left;
          margin-top: -10px;
          margin-bottom: 10px;
          font-weight: 500;
          font-size: 19px;
          line-height: 1em;
          letter-spacing: 0.02em;

          small {

          }
        }

        #nearest-store-wrapper {
          background: $button-text-color;
          border: 1px solid $primary-color;
          margin-bottom: 10px;
          padding: 10px;
          text-align: left;
          position: relative;
          border-radius: $button-radius;

          ul {
            list-style: none;
            margin: 0;
            font-size: 0.9em;
            padding: 0;
            line-height: 1.3em;
          }

          .result-list-select-store-button {
            display: none;
          }

          .result-logo {
            display: inline-block;
            width: 55px;
            float: left;

            .zoom-in-store {
              img {
                opacity: 1;
              }
              span {
                display:none;
              }
            }
          }

          .result-topline {
            width: calc(100% - 55px);
            display: inline-block;
            font-size: 14px;
            line-height: 14px;
            float: left;
            padding-left: 20px;

            .store-title {
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: 0.04em;
              margin-bottom: 5px;
              display: block;
            }

            .store-address {
              margin-bottom: 5px;
            }

            .more-information-slide-down {
              text-decoration: none;
              color: $primary-color;
              font-weight: 500;
              font-size: 0.9em;
            }

            > ul {

              > li {

              }
            }
          }

          &:after {
            content: " ";
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
            zoom: 1;
          }
        }

        #content-inner {
          background: $content-background-color;
          padding: 5px;
          border: 1px solid $light-border-color;
          #collectplus-checkout {
            width: 100%;
          }
          .map-actions {
            margin-bottom: 10px;
            width: 100%;
            display: flex;

            #find-by-location {
              padding-top: 0px;
              width: 10%;
              text-align: center;
              &.actively-searching svg path, &:hover svg path {
                fill: #F26D26;
              }
              svg {
                display: inline-block;
                width: 15px;
                top: 8px;
                position: relative;
              }
            }

            #postcode {
              width: 79%;
              background: $postcode-input-bg-colour;
              float: left;
              margin: 0;
              padding-top: 7px;
              padding-bottom: 6px;
            }

            #postcode-submit {
              background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
              background-position: center center;
              background-repeat: no-repeat;
              text-indent: -9999px;
              color: #FFF;
              width: 10%;
              background-size: 15px 15px;
              padding: 0;
              border: none;

              &:hover {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#F26D26' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
              }
            }
          }

          #googlemap {
            width:100%;
            height:300px;
          }

          #collectplus-results {
            margin-bottom: 5px;

            > ul {
              list-style: none;
              padding: 0;
              max-height: 300px;
              overflow-y: scroll;

              > li {
                padding: 15px 5px 0;
                border-bottom: 1px solid $light-border-color;
                text-align: left;
                position: relative;

                .result-logo {
                  display: inline-block;
                  width: 55px;
                  float: left;
                  padding-left: 2%;

                  .zoom-in-store {
                    text-align: center;
                    text-decoration: none;
                    img {
                      opacity: 0.5;
                    }

                    span {
                      text-decoration: none;
                      font-size: 8px;
                      text-transform: uppercase;
                      font-weight: 600;
                      color: #888;
                      line-height: 1.3em;
                      display: block;
                      text-align: center;
                    }
                  }
                }

                .result-topline {
                  width: calc(100% - 55px);
                  display: inline-block;
                  font-size: 12px;
                  line-height: 12px;
                  padding-left: 10px;

                  a {
                    text-decoration: none;
                    font-weight: 500;
                    margin-bottom: 10px;
                    color: $primary-color;
                    display: block;
                    padding-top: 5px;
                  }

                  .store-title {
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.06em;
                    margin-bottom: 10px;
                    display: block;
                  }
                  .store-address {
                    margin-bottom: 10px;

                    ul {
                      overflow-y: initial;
                      list-style: none;
                      margin: 0;
                      padding: 0;
                      line-height: 1.4em;
                      li {
                        margin-bottom: 0;
                      }
                    }
                  }
                  .more-information-slide-down {

                  }

                  .more-information-container {
                    padding-bottom: 20px;
                    .cp-icon {
                      padding-left: 20px;
                      padding-top: 0;
                      line-height: 2em;
                      &.cp-opening-times {
                        background: url('https://s3.eu-west-2.amazonaws.com/collectplus/clock.svg') left center / 14px no-repeat; 
                      }
                      &.cp-distance {
                        background: url('https://s3.eu-west-2.amazonaws.com/collectplus/car.svg') left center / 14px no-repeat; 
                      }
                      &.cp-disabled {
                        background: url('https://s3.eu-west-2.amazonaws.com/collectplus/wheelchair.svg') left center / 14px  no-repeat; 
                      }
                    }

                    .selected-opening-times {

                      p {
                        margin-bottom: 10px;
                      }

                      img {
                        width: 16px;
                        vertical-align: middle;
                        margin-left: 10px;
                      }

                      ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;

                        li {
                          margin-bottom: 10px;
                        }
                      }
                    }

                    .store-info-icon {
        
                      p {
                        margin-bottom: 10px;
                      }

                      img {
                        width: 16px;
                        vertical-align: middle;
                        margin-left: 10px;
                      }
                    }
                  }
                }
                .result-list-select-store-button {
                  margin-bottom: 10px;

                  a {
                    display: block;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    zindex: 1;
                    font-size: 11px;
                    width:  100%;
                    text-decoration: none;
                    border-radius: $button-radius;
                    padding: 3px;
                    background: $primary-color;
                    color: $button-text-color;

                    &:hover {
                      cursor: pointer;
                    }
                  }
                }
              }
              &.selected-collectplus-store-li {
                background: $light-border-color;
                color: #555;

                a {
                  color: #555;
                }

                .result-logo {

                  img {
                    opacity: 1;
                  }
                }

                div#select-store-button {
                  display: none;

                  a {
                    text-decoration: none;
                    border-radius: $button-radius;
                    &:hover {
                      background: $primary-color;
                      color: $button-text-color;
                    }
                  }
                }

                .result-list-select-store-button {
                  text-decoration: none;
                  border-radius: $button-radius;
                  cursor: pointer;
                  position: relative;

                  a {
                    background-color: $primary-color;
                    color: $button-text-color;
                    cursor: pointer;
                    position: relative;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

  
.info-actions {
  position: fixed;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: #FFF;
  padding: 0;
  text-transform: uppercase;

  .infowindow-select {
    text-decoration: none;
    font-size: 0.8em;
    font-weight: 600;
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #F47929;
    color: #FFF;
  }

  .infowindow-selected {
    display: block;
    text-align: center;
    padding: 6px 10px;
    background: #f1f1f1;
    font-weight: 600;
    text-decoration: none;
    pointer-events: none;
    cursor: normal;
    color: #000;
    letter-spacing: 0.06em;
    width: 100%;
  }

  .infowindow-checkout {
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    display: block;
    width: 100%;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    background: $primary-color;
    color: $button-text-color;
  }
}
  
.gm-style-iw > div > div {
  margin-bottom: 10px;
}

.gm-style-iw {
  text-align: left;
}

#collectplus-results > ul >li.selected-collectplus-store-li {
  background: $primary-color;
  color: $button-text-color;
}

#collectplus-results > ul >li.selected-collectplus-store-li a {
  color: $button-text-color;
}

.more-information-container > div {
  padding-top:15px;
}

p.cp-icon {
    padding-left: 20px;
    margin-bottom: 10px;
}

p.cp-icon.cp-opening-times {
  background: url('https://s3.eu-west-2.amazonaws.com/collectplus/clock.svg') left center no-repeat; 
}

p.cp-icon.cp-distance {
  background: url('https://s3.eu-west-2.amazonaws.com/collectplus/car.svg') left center no-repeat; 
}

p.cp-icon.cp-disabled {
  background: url('https://s3.eu-west-2.amazonaws.com/collectplus/wheelchair.svg') left center no-repeat; 
}

.distance a {
  font-size: 0.9em;
  text-decoration: none;
  color: $primary-color;
  font-weight: 600;
}
  
.infoBox > img {
  max-width: none;
  width: 22px;
}

.step__footer__continue-btn {
  transition: opacity .25s ease-in-out .1s;
}

.loading_result {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  display: inline-block;
  border: 8px solid #f3f3f3;
  border-top: 8px solid #F26D26;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin:  20px 0 20px 10px;
  text-align: center;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

.infoBox-inner {
  overflow-y: scroll;
  height:210px;
  padding-bottom:60px;

  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: $light-border-color;
  }
  p {
    margin-bottom: 5px;
  }

  ul {
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;

      li {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      font-size: 0.9em;
      display: block;
      letter-spacing: 0.02em;
    }
  }
}