@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap");

body {
  background: #f7f7f7;
  font-family: "Cairo", sans-serif;
}

a {
  transition: all 300ms ease-in-out;
  color: #d13334;
  &:hover {
    color: darken(#d13334, 10%) !important;
  }
}

.btn-primary {
  background-color: #d13334;
  border-color: #d13334;
  &:hover {
    background-color: darken(#d13334, 10%);
    border-color: darken(#d13334, 10%);
    box-shadow: none;
    color: #fff !important;
  }
  &:focus,
  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
    background-color: darken(#d13334, 10%);
    border-color: darken(#d13334, 10%);
    box-shadow: none;
  }
}

.btn-link {
  &.text-dark {
    color: #d13334 !important;
  }
}

.navbar {
  box-shadow: 0 3px 6px rgba(#000, 0.1);
  &.bg-primary {
    background: #fff !important;
  }
  .navbar-brand {
    img {
      height: 97px;
      @media (max-width: 991px) {
        height: 60px;
      }
      @media (max-width: 767px) {
        height: 55px;
      }
    }
  }
  .nav-item {
    .nav-link {
      color: #212529;
      &.btn-outline-dark {
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .navbar-toggler {
    &:focus {
      outline: none;
    }
    .navbar-toggler-icon {
      img {
        height: 20px;
      }
    }
  }
}

.header {
  .banner-slider {
    .slick-dots {
      li {
        &.slick-active {
          button {
            &::before {
              color: #d13334;
            }
          }
        }
      }
    }
  }
}

#footer {
  background: #d13334 url(images/shared/footer-lg.jpg) no-repeat center
    center/cover;
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
  @media (max-width: 991px) {
    min-height: 220px;
    background-image: url(images/shared/footer-md.jpg);
    &.fixed-to-bottom {
      min-height: 350px;
    }
  }
  .logo {
    height: auto;
    img {
      height: 105px;
    }
  }
  .social {
    gap: 15px;
    margin-top: 15px;
    a {
      width: size(34);
      height: size(34);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e5e5e5;
      border-radius: 50%;
      color: #666666;
      transition: 0.3s all ease-in-out;
      &:hover {
        background: #d13334;
        color: #fff !important;
        text-decoration: none;
      }
    }
  }
  .copyright {
    margin-top: 15px;
    color: rgba(#fff, 0.8);
  }
}

.upcoming,
.past {
  .title {
    color: #212529;
  }
  &.past {
    background-color: #e5e5e5;
  }
}

.data-container {
  box-shadow: 0 3px 6px rgba(#000, 0.1);
}

.event-details {
  .event-header {
    background-color: #e1e1e1;
  }
}

.page-header {
  background-color: #262161;
  .title {
    color: #fff;
  }
}

.steps {
  .steps-container {
    li {
      color: gray;
      &::before,
      &::after {
        background-color: gray;
      }
      &.active {
        color: #fff;
        &::before {
          border-color: #fff;
          background: #fff;
        }
        & + li {
          &:after {
            background-color: #fff;
          }
        }
      }
      &.visited {
        color: lighten(#fff, 10%);
        &::before {
          border-color: lighten(#fff, 20%);
          background: lighten(#fff, 20%);
        }
        & + li {
          &:after {
            background-color: lighten(#fff, 20%);
          }
        }
      }
    }
  }
}

.dates-times {
  box-shadow: 0 0 65px rgba(#f2e8dc, 0.3) !important;
  background-color: #fff !important;
  .dates-row {
    .date {
      border-color: #eeeeee;
      background: #fff;
      box-shadow: none;
      color: #282828;
      &.active,
      &:hover {
        color: #d13334;
        border-color: #d13334;
        background-color: #fff;
        box-shadow: 0 0 6px rgba(#d13334, 0.1);
      }
    }
  }
  .times-row {
    .time {
      border-color: #eeeeee;
      background: #fff;
      box-shadow: none;
      color: #282828;
      &.active,
      &:hover {
        color: #d13334;
        border-color: #d13334;
        background-color: #fff;
        box-shadow: 0 0 6px rgba(#d13334, 0.1);
      }
    }
  }
}

.card {
  border: 2px solid #e5e5e5;
  box-shadow: 0 3px 6px rgba(#000, 0.1);
  .card-header {
    &:first-child {
      background-color: gray !important;
      color: #fff;
    }
  }
}

.number_ticket {
  .input-number-increment,
  .input-number-decrement {
    transition: 0.3s all ease-in-out;
    border-color: #d13334;
    &:before {
      color: #d13334;
      border-color: #d13334;
      transition: 0.3s all ease-in-out;
    }
    &:hover {
      background: #d13334;
      &::before {
        color: #fff;
      }
    }
  }
}

.custom-radio {
  .custom-control-input {
    &:checked {
      & ~ .custom-control-label {
        &::before {
          background-color: #d13334;
        }
      }
    }
  }
}

.custom-checkbox {
  .custom-control-input {
    &:checked {
      & ~ .custom-control-label {
        &::before {
          background-color: #d13334;
          box-shadow: none;
        }
      }
    }
  }
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none !important;
}

.form-control {
  &:focus {
    border-color: #d13334;
    box-shadow: none;
  }
}

.alertify {
  .ajs-header {
    background-color: #d13334 !important;
  }
  .ajs-footer {
    .ajs-buttons {
      .ajs-button.ajs-ok {
        color: #d13334 !important;
      }
    }
  }
}