/*
 *
 * This is search-results.less, search results style for this plugin.
 *
 */
.search-results {
  color: @text-dark;
  font-weight: 400;
  margin-bottom: 50px;

  h1 {
    &.search-results__entry-title {
      display: none;
    }
  }

  &__page {
    header,
    .entry-title,
    .post-meta {
      display: none;
    }

    h1 {
      &.search-results__entry-title {
        display: block;
        margin-bottom: 50px;
        color: @navy-color;

        i {
          color: @orange-color;
          font-size: 20px;
        }
      }
    }
  }

  &__autotext {
    font-size: @font-size-base;
    margin: 20px 0;
  }

  &__content {
    .banners-block {
      .banners-block-row {
        display: grid;
        grid-gap: 10px 10px;
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 20px;

        @media screen and (max-width: @screen-sm) {
          grid-template-columns: repeat(auto-fit, minmax(31%, 1fr));
        }
      }

      .banner-wrapper {
        background-color: @blue-light;
        box-shadow: @box-shadow-inputs;
        padding: 20px 10px;
        position: relative;
        height: 80px;
        cursor: pointer;

        @media screen and (max-width: @screen-sm) {
          height: unset;
          padding: 20px 0;
          grid-column: span 1;

          &:nth-of-type(2) {
            display: none;
          }
        }

        .item {
          @media screen and (max-width: @screen-sm) {
            display: block;
            text-align: center;
          }

          img {
            height: 40px;
          }
        }

        &__find-text {
          position: absolute;
          right: 0;
          top: 20px;
          padding-right: 10px;
          text-align: right;
          font-weight: 400;
          line-height: 18px;

          @media screen and (max-width: @screen-sm) {
            display: block;
            background: @navy-color;
            position: relative;
            padding: 10px;
          }

          .find {
            text-transform: uppercase;
            font-weight: bolder;
            color: @navy-color;
            font-size: @font-size-base + 4;
            height: 40px;

            @media screen and (max-width: @screen-sm) {
              color: @white-color;
              font-size: @font-size-base;
            }

            small {
              display: block;
              font-size: @font-size-base - 2;

              @media screen and (max-width: @screen-sm) {
                font-size: @font-size-base - 4;
              }

              &:before {
                font-family: @fa-font-family;
                content: @fa-var-arrow-right;
                color: @orange-color;
                font-weight: 600;
                padding-right: 5px;
              }
            }
          }
        }
      }
    }

    .bus-table {
      &__note {
        border: 1px solid @red-transparent-85;
        border-radius: @border-radius-small;
        background: @red-transparent-90;
        text-align: left;
        padding: 10px 20px;

        span {
          &:before {
            font-family: @fa-font-family;
            content: @fa-var-search;
            font-weight: 600;
            color: @border-red;
            padding-right: 10px;
          }
        }
      }

      &__body {
        margin-top: 20px;
      }

      &__body-row {
        background: @white-color;
        border-radius: @border-radius-small;
        box-shadow: @box-shadow-table-row;
        display: block;
        margin-bottom: 10px;
        padding: 20px;
        font-size: @font-size-base;

        @media screen and (max-width: @screen-sm) {
          font-size: @font-size-small;
        }

        &.unavailable {
          background: @grey-light;
        }

        &:last-of-type {
          margin-bottom: 0;
        }

        .ticket {
          &__details {
            display: grid;
            grid-template-columns: 6fr 4fr;

            &:last-of-type {
              grid-template-columns: repeat(2, 1fr);
              min-height: 38px;
            }
          }

          &__stations {
            @media screen and (min-width: @screen-sm) {
              display: grid;
              grid-template-columns: 1fr 1fr 3fr;
            }
          }

          &__departure {
            max-width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &__destination {
            .ticket__station {
              @media screen and (max-width: @screen-sm) {
                &:before {
                  content: '';
                  display: block;
                  width: 1px;
                  height: 14px;
                  position: absolute;
                  top: -8px;
                  left: -14px;
                  border-right: 1px solid @navy-color;
                }
              }
            }
          }

          &__price {
            text-align: right;
            &-value {
              font-size: @font-size-base + 2;
            }
            &-note {
              @media screen and (max-width: @screen-sm) {
                font-size: @font-size-small;
              }
            }
          }

          &__time,
          &__price-value {
            font-weight: 600;
            color: @navy-color;

            @media screen and (min-width: @screen-sm) {
              display: block;
            }
          }

          &__time {
            @media screen and (max-width: @screen-sm) {
              position: relative;
              margin-right: 10px;

              &:after {
                content: '';
                width: 6px;
                height: 6px;
                position: absolute;
                top: 6px;
                border-radius: 100px;
                display: inline-block;
                border: 1px solid @navy-color;
                right: -12px;
              }
            }
          }

          &__station {
            position: relative;
            white-space: nowrap;

            @media screen and (max-width: @screen-sm) {
              margin-left: 10px;
              font-size: @font-size-small;
            }
          }

          &__price-value {
            display: block;
          }

          &__connection {
            margin: 10px 30px;
            width: 50px;
            text-align: center;

            @media screen and (max-width: @screen-sm) {
              display: none;
            }

            span {
              &.trip-duration {
                font-size: @font-size-small - 2;
              }

              &.connecting-line {
                content: '';
                width: 100%;
                height: 1px;
                position: relative;
                display: block;
                border-bottom: 1px solid @navy-color;

                &:before,
                &:after {
                  content: '';
                  width: 6px;
                  height: 6px;
                  position: absolute;
                  border-radius: 100px;
                  display: inline-block;
                  border: 1px solid @navy-color;
                  top: -4px;
                }

                &:before {
                  left: -8px;
                }

                &:after {
                  right: -8px;
                }
              }
            }
          }

          &__company {
            margin: auto 0;

            &-op-int {
              display: inline-block;

              @media screen and (max-width: @screen-sm) {
                display: none;
              }
            }

            &-name {
              display: inline-block;
              color: @navy-color;
              font-weight: 600;
              font-size: @font-size-base;
              margin-left: 10px;

              @media screen and (max-width: @screen-sm) {
                font-size: @font-size-small;
                margin-left: 0;
                display: block;
              }
            }
          }

          &__vehicle-type {
            font-size: @font-size-small - 2;

            @media screen and (min-width: @screen-sm) {
              font-size: @font-size-base;
              display: inline-block;

              &:before {
                content: "-";
              }
            }
          }

          &__route {
            &-unavailable,
            &-closed {
              background: @orange-transparent;
              color: darken(@orange-color, 15%);
              border-radius: 100px;
              padding: 5px 10px;

              @media screen and (max-width: @screen-sm) {
                font-size: @font-size-small - 2;
              }
            }

            &-closed {
              background: rgba(242, 245, 247, 0.75);
              color: @navy-color;
            }
          }

          &__buy-button {
            text-align: right;
            margin: auto 0;

            .btn-orange {
              background: @orange-color;
              color: @white-color;
              font-weight: 600;
              border-radius: @border-radius-small;
              box-shadow: @box-shadow-btn;
              font-size: @font-size-base;

              @media screen and (max-width: @screen-sm) {
                font-size: @font-size-small;
              }

              &:hover {
                background: darken(@orange-color, 10%);
                color: @white-color !important;
              }
            }
          }
        }
      }

      &__disclaimer {
        margin-top: 20px;
        padding: 10px 20px;
        border-radius: @border-radius-small;
        border: 1px solid @blue-transparent-85;
        background: @blue-transparent-90;
        position: relative;

        div {
          &:first-of-type {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            color: @navy-color;
          }

          &:nth-of-type(2) {
            margin-left: 50px;

            span {
              font-weight: 600;
              font-style: normal;
            }
          }
        }
      }

      &__map {
        height: 400px;
        width: 100%;
        margin-top: 10px;
        z-index: 0;

        &-wrapper {
          margin-top: 40px;
        }

        &-title {
          border-bottom: 1px solid @blue-light;

          @media screen and (max-width: @screen-sm) {
            font-size: @font-size-base + 4;
          }

          span {
            color: @navy-color;
          }
        }
      }
    }
  }

  &__no-results {
    font-size: @font-size-base;

    .suggested-date {
      &s__title {
        font-size: @font-size-base + 4;
        padding-bottom: 10px;
      }

      &s {
        ul {
          list-style-type: none;
          margin-left: 0;

          li {
            display: inline-block;
            width: 30%;

            a {
              //yeah, I know, this is not a good solution
              color: @blue-color !important;

              span {
                color: @text-dark !important;
              }

              &:hover {
                color: @navy-color !important;
              }

              &::before {
                font-family: @fa-font-family;
                font-weight: 600;
                font-size: @font-size-base + 4;
                content: @fa-var-calendar;
              }
            }
          }
        }
      }
    }

    span {
      font-weight: 600;
    }

    em {
      font-weight: 600;
      font-style: normal;
    }

    .email-form {
      margin-top: 20px;

      input {
        height: 40px;
        border-radius: 2px;
        margin-bottom: 0;
        border: 1px solid @border-light-color;
        box-shadow: unset;
        font-size: 16px;

        &.btn-orange {
          font-weight: 600;
          background: @orange-color;
          color: @white-color;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
    }

    a {
      font-weight: 400;
      color: @blue-color;
      text-decoration: none;
    }

    .confirmation-box {
      input[type='checkbox'] {
        width: 20px;
        height: 20px;
        border-radius: @border-radius-small;
        border: 1px solid @border-light-color;
        margin-right: 10px;
        margin-top: 0;
      }

      label {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;

        a {
          color: @blue-color;
        }
      }
    }
  }

  .gbb {
    &_trigger {
      display: inline-block;
      cursor: pointer;

      img {
        vertical-align: text-bottom;
      }
    }

    &_pop-up {
      display: none;
    }
  }
}

.qtip-default {
    background: @white-color;
    text-align: left;
    color: @text-dark;
    padding: 10px;
    border-radius: @border-radius-small;
    border: 1px solid @border-light-color;
    font-size: @font-size-small - 2;
    box-shadow: @box-shadow-inputs;
}