// Card

.card {
  border: none;
  @include border-radius(5px);
  background: #f9f9f9;
  margin-bottom: 30px;
  padding: 10px 20px;
  overflow: hidden;
  @include transition(all 0.5s ease);

  .card-header {
    background: transparent;
    border-bottom: 1px solid #cde9f8;
    padding: 10px 0;
  }

  .card-content {
    min-height: 115px;
    margin: 10px 0;
    padding: 10px 0;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    height: 35px;
    margin-top: 10px;
    padding: 0;
    padding-bottom: 10px;
    background-color: transparent;
    @media (max-width: $small) {
      height: 20px;
      padding-bottom: 0;
    }

    ul {
      li {
        margin-right: 15px;
        a {
          font-size: 10px;
        }
      }
    }
    .btn-sm {
      border-width: 1px !important;
      font-size: 12px;
      margin-bottom: 0;
      padding: 8px 20px;
    }
    i {
      height: 18px;
      width: 18px;
      display: inline-block;
      line-height: 18px;
    }
  }

  p {
    min-height: 20px;
  }

  p,
  span {
    color: $grey;
    font-size: 11px;
    margin: 0;
    overflow-wrap: anywhere;
    &.title {
      margin: 5px 0;
      &,
      span {
        font: {
          size: 18px;
          weight: 600;
        }
        line-height: 20px;
      }
    }
  }

  a {
    font: {
      size: 12px;
      weight: 600;
    }
  }

  &.card-small {
    height: 150px;
  }

  &.card-big {
    height: 270px;
  }

  &.card-list {
    margin-bottom: 10px;
    .card-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: auto;
      padding: 0;
      .card-content-item {
        width: 100%;
        select {
          margin-left: auto;
          width: 50px;
        }
      }
      p {
        font-size: 16px;
        height: auto;
        * {
          font-size: 16px;
        }

        &.info {
          span {
            font-size: 11px;
            margin-left: 10px;
          }
        }
      }
      a {
        display: block;
      }
    }
    @media (max-width: $medium) {
      .card-content {
        align-items: flex-start;
        flex-direction: column;
        .info span {
          display: block;
          margin-left: 0 !important;
        }
      }
    }
  }

  // Tags
  &.bg-blue-light {
    &:hover,
    &:focus {
      background: #dbe9f5 !important;
      img {
        @include transform(scale(1.05));
      }
    }
  }

  &.card-img {
    padding: 15px;
    height: auto;

    .card-content {
      height: auto;
      margin: 0;
      padding: 0;

      .col-img {
        margin-right: 20px;
        @media (max-width: $small) {
          margin: 0 0 10px 0;
        }
      }

      figure {
        position: relative;
        overflow: hidden;
        img {
          @include transition(all 0.5s ease);
        }
      }

      p.title {
        overflow: hidden;
        span {
          font-size: 18px;
          line-height: 24px;
        }
      }

      @media (max-width: $small) {
        p {
          height: auto;
          &.title {
            height: auto;
          }
        }
      }
      img {
        width: 100%;
      }
    }
  }

  &.card-promo {
    height: 100px;

    img {
      width: 100%;
    }

    p {
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      margin-bottom: 0;

      small {
        line-height: 16px;
      }
    }

    @media (max-width: $medium) {
      height: auto;
      img {
        max-width: -moz-max-content;
        margin-bottom: 10px;
      }
    }
  }

  // Card small
  @media (max-width: $small) {
    margin-bottom: 20px;
  }
}

// Mi cuenta - Socios ----------------------------------------------
.socio-categoria {
  .card-footer {
    display: block;
    ul {
      li {
        font-size: 10px;
        a {
          font-size: 10px;
        }
      }
    }
  }
}

// Mi cuenta - Entradas ----------------------------------------------
.box-entradas {
  .card {
    padding: 0;
    .card-header {
      position: relative;
      min-height: 80px;
      padding: 0 20px;
      align-content: center;
      background: no-repeat center center;
      background-size: cover;
      .title {
        display: block;
        margin: 0;
        color: #ffffff !important;
        position: relative;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      &:before {
        content: "";
        background-color: #00000098;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
    .card-content {
      position: relative;
      padding: 10px 20px;
      min-height: 90px;
      .alert {
        position: absolute;
        right: 20px;
        top: 10px;
        width: 60px;
        height: 60px;
        padding: 5px;
      }
      i {
        vertical-align: sub !important;
      }
    }
    .card-footer {
      padding: 0 20px 20px;
      height: auto;
      display: block;
      margin-top: 0;
      @media (min-width: $medium) {
        a {
          &:hover,
          &.btn-border {
            border: 2px solid #ddd !important;
            color: #ddd !important;
            cursor: auto;
          }
        }
      }
      @media (max-width: $small) {
        padding: 0 20px 10px;
      }
      span {
        text-transform: none;
        color: #999 !important;
      }
    }
  }
  span {
    &.help-block {
      margin-top: 5px;
      color: #00000060 !important;
    }
  }
}

#slide-entradas {
  &.owl-theme {
    .owl-controls {
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;
      .owl-buttons {
        display: flex;
        justify-content: space-between;
        div {
          width: 28px;
          height: 28px;
          text-indent: -9999px;
          opacity: 1;
          background: #006cd8;
          border-radius: 14px;
          position: relative;
          &.owl-prev {
            &:after {
              position: absolute;
              left: 0;
              top: 0;
              content: "";
              width: 28px;
              height: 28px;
              display: block;
              background: #ffffff;
              -webkit-mask: url("../assets/svg/ico-arrow-prev.svg") no-repeat 50% 50%;
              mask: url("../assets/svg/ico-arrow-prev.svg") no-repeat 50% 50%;
            }
          }
          &.owl-next {
            &:after {
              position: absolute;
              left: 0;
              top: 0;
              display: block;
              content: "";
              width: 28px;
              height: 28px;
              background: #ffffff;
              -webkit-mask: url("../assets/svg/ico-arrow-next.svg") no-repeat 50% 50%;
              mask: url("../assets/svg/ico-arrow-next.svg") no-repeat 50% 50%;
            }
          }
        }
      }
    }
  }
}