@import '~bootstrap/scss/bootstrap';

@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap');

$font-family: "Futura", Times, serif;
$font-family-bold: "futurabold", Times, serif;

$bg-color: #FBFBFB; //rgb(50,50,50);
$font-color: $black;
$white-font-color: #fff;
$header-font-color: #fff;
$footer-font-color: #fff;

$yellow: rgb(245,202,60);
$black: #000;
$blue-light: #2b96af;
$blue-dark: #095B92;

$error-color: red;

$header-title-color: $font-color;

$navbar-brand-color: $white-font-color;
$navbar-menulinks-color: $white-font-color;
$hambuger_menubars-color: $white-font-color;

$voucher_card-bg: #FBFBFB;
$voucher_card-color: #222222;
$voucher_card-title-color: $blue-dark;

$voucher_card-claimable_button-bg: $blue-light;
$voucher_card-claimable_button-color: $white-font-color;
$voucher_card-unclaimable_button-bg: grey;
$voucher_card-unclaimable_button-color: #D9D9D9;

$voucher_card-usable_button-bg: $blue-light;
$voucher_card-usable_button-color: $white-font-color;
$voucher_card-unusable_button-bg: grey;
$voucher_card-unusable_button-color: #D9D9D9;

$voucher_usage-bg: $blue-light;
$voucher_usage-color: $bg-color;
$voucher_usage-button-bg: $yellow;
$voucher_usage-button-color: $blue-dark;

$register-modal-bg: $blue-light;
$register-modal-color: $bg-color;
$register-modal-title-color: $white-font-color;
$register-modal-button-bg: $yellow;
$register-modal-button-color: $black;

body {
  text-rendering:optimizeLegibility;
  background-color: $bg-color;
  color: $font-color;
  font-family: $font-family;
}

h1, h2, h3{
  font-family: $font-family-bold;
  color: $black;
}

h4, h5, h6{
  font-family: $font-family;
  color: $black;
}

a{
  color: $font-color;
}

.color-white{
  color: $font-color;
  b{
    color: $yellow;
  }
}

.container {
  padding: 0;
}

.navbar {
  margin-bottom: 0 !important;
  background: $black;

  .navbar-brand {
    color: $navbar-brand-color;
    max-width: 60%;
    height: inherit;
    padding-bottom: 0;
    padding-top: 0;

    img {
      max-height: 80px;
    }
  }
  .navbar-toggler {
    padding: 0;
    .menu-bar {
      display: block;
      width: 25px;
      height: 4px;
      margin-bottom: 4px;
      position: relative;

      background: $hambuger_menubars-color;
      border-radius: 3px;
      z-index: 1;


      &:last-child {
        margin-bottom: 0px;
      }
    }
  }

  .navbar-nav {

    .nav-item {
      color: $navbar-menulinks-color;
      &:hover {
        text-decoration: underline;
      }
    }

    a {
      color: inherit;
    }
  }
}

.justify-space-between {
  justify-content: space-between;
}

.arrow {
  box-sizing: border-box;
  height: 7px;
  width: 7px;
  display: inline-block;
  border-style: solid;
  border-color: $font-color;
  border-width: 0px 1px 1px 0px;
  transition: border-width 150ms ease-in-out;

  &.right {
    transform: rotate(-45deg);
  }

  &.left {
    transform: rotate(135deg);
  }

  &.down {
    transform: rotate(45deg);
    margin-left: 0.3em;
    margin-bottom: 0.1em;
  }

  &.up {
    transform: rotate(-135deg);
  }
}

.tick {
  display:inline-block;

  &:after{
    /*Add another block-level blank space*/
    content: '';
    display: block;

    /*Make it a small rectangle so the border will create an L-shape*/
    width: 5px;
    height: 10px;

    /*Add a white border on the bottom and left, creating that 'L' */
    border: solid #000;
    border-width: 0 2px 2px 0;

    /*Rotate the L 45 degrees to turn it into a checkmark*/
    transform: rotate(45deg);
  }
}

.header-title {
  padding: 0 15px;
  color: $header-title-color;
  font-weight: 700;
  text-transform: uppercase;
}

// voucher_feed and register
#register-modal {
  .modal-content {
    background-color: $register-modal-bg;
    color: $register-modal-color;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
  }

  .modal-header {
    border-bottom: none;
  }

  .modal-title {
    color: $register-modal-title-color;
  }

  .modal-body {
    padding-top: 0;
    padding-bottom: 0;
  }

  .modal-footer {
    border-top: none;
    justify-content: center;
  }

  .form {
    .form-group {
      font-size: 14px !important;
    }
    .form-control {
      font-size: 14px;
    }
    .input-group-text {
      font-size: 14px;
    }

    input {
      box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    }

    .form-text {
      &.error {
        color: $error-color;
      }
    }

    .form-check {
      .form-text {
        margin-left: -1.25rem;
      }
      .form-check-label {
        font-size: 14px;
      }
    }


    .form-group {
      .select2 {
        span {
          height: 35px;
          line-height: 35px;
          border-radius: 0.25rem 0 0 0.25rem;
          border-color: #ced4da;
        }
      }
    }


    a {
      color: inherit;
      text-decoration: underline;
    }

  }

  #register-modal-countrycode {
    cursor: pointer;
  }

  #register-modal-submit {
    background-color: $register-modal-button-bg;
    color: $register-modal-button-color;
  }
}


#register_page {
  background-color: $register-modal-bg;
  color: $register-modal-color;
  padding: 1rem;
  .form {
    .form-group {
      font-size: 14px !important;
    }
    .form-control {
      font-size: 14px;
    }
    .input-group-text {
      font-size: 14px;
    }

    input {
      box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    }

    .form-text {
      &.error {
        color: $error-color;
      }
    }

    .form-check {
      .form-text {
        margin-left: -1.25rem;
      }
      .form-check-label {
        font-size: 14px;
      }
    }


    .form-group {
      .select2 {
        span {
          height: 35px;
          line-height: 35px;
          border-radius: 0.25rem 0 0 0.25rem;
          border-color: #ced4da;
        }
      }
    }


    a {
      color: inherit;
      text-decoration: underline;
    }


    button[type="submit"] {
      background-color: $register-modal-button-bg;
      color: $register-modal-button-color;
    }

  }

  .button-container {
    text-align: center;
    margin-top: 1em;
  }

  #register-modal-countrycode {
    cursor: pointer;
  }

  #register-modal-submit {
    background-color: $register-modal-button-bg;
    color: $register-modal-button-color;
  }
}



// voucher_feed and my_vouchers

.voucher_card-wrapper {
  background-color: $voucher_card-bg;
  color: $voucher_card-color;
  border: 1px solid #EEE;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
  margin: 0.5em;

  @media screen and (max-width: 479px) {
    margin-left: 0;
    margin-right: 0;
  }
}
.voucher_card {

  max-width: 400px;

  a {
    color: inherit;
    &:hover, &:active, &:visited {
      text-decoration: none;
    }
  }

  @media screen and (max-width: 575px) {
    margin: auto;
  }

  .voucher_card-content {
    display: flex;
    flex-direction: column;
    font-size: 14px;

    .voucher_card-title {
      color: $voucher_card-title-color
    }
  }

  .voucher_card-image {
    height: 210px;
    max-height: 40vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

    @media screen and (max-width: 575px) {
      height: calc(70vw - 1em);
    }

    @media screen and (max-width: 479px) {
      height: 52vw;
    }
  }

  .voucher_card-tc {
    font-size: 12px;
    padding: 10px 0;

    div[data-toggle] {
      cursor: pointer;
    }

    .arrow {
      border-color: $voucher_card-color;
    }
  }

  .voucher_card-claimable, .voucher_card-unclaimable {
    padding: 8px 10px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    border-radius: 0.5em;
    font-weight: bold;
    letter-spacing: 1px;
  }

  .voucher_card-claimable {
    background-color: $voucher_card-claimable_button-bg;
    color: $voucher_card-claimable_button-color;
  }

  .voucher_card-unclaimable {
    background-color: $voucher_card-unclaimable_button-bg;
    color: $voucher_card-unclaimable_button-color;
  }


  .voucher_card-usable {
    background-color: $voucher_card-usable_button-bg;
    color: $voucher_card-usable_button-color;
  }

  .voucher_card-unusable {
    background-color: $voucher_card-usable_button-bg;
    color: $voucher_card-usable_button-color;
  }

}

.ui-loader {
  display: none;
}


#usemy_vouchers-13DIGIT {

  .voucher_card {

    .voucher_card-claimable, .voucher_card-unclaimable {
      border-radius: 0;
    }

    .voucher_card-claimable {
      touch-action: none;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        // border-width: 0 16px 16px 0;
        // border-style: solid;
        // border-color: rgba($voucher_card-claimable_button-color, 1) $bg-color;
        height: 16px;
        width: 16px;
        background: linear-gradient(
                        to top right,
                        $voucher_card-claimable_button-color 0%,
                        $voucher_card-claimable_button-color 50%,
                        $bg-color 50%,
                        $bg-color 100%
        );
        box-shadow: 0 2px 2px rgba(0,0,0,0.2), -2px 2px 2px rgba(0,0,0,0.1);
        transition: height 200ms ease, width 200ms ease;
      }



      &.swiped {
        &::before {
          height: 100%;
          width: 100%;
          background: $voucher_card-claimable_button-color;
          box-shadow: none;
          transition: height 200ms ease, width 200ms ease;
        }
      }
    }
    .voucher_card-tc {
      padding-bottom: 0;
    }
  }
}

.voucher_single-claimable{

  background-color: $voucher_card-claimable_button-bg !important;
  color: $voucher_card-claimable_button-color !important;
}

#header{
  background: $black;
  color: $header-font-color;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: content-box;
  a{
    color: $header-font-color;
  }
}

.search-input{
  width:300px;
  text-align: center;
  border-radius: 10px 10px;
  height: 30px;
  border: 0;
  color: $black;
  background: white;
  display: flex;
  padding-right: 10px;
  input{
    width: 100%;
    border: 0;
    margin-left: 10px;
  }
  i{
    color: white;
    vertical-align: middle;
  }
  button{
    margin: auto;
    width: 45px;
    height: 100%;
    background: #2b96af;
    margin: auto;
    text-align: center;
    right: 0;
    margin-right: -10px;
    border-radius: 0 10px 10px 0;


  }
}

#content_div{
  color: initial;
  min-height: 1000px;
}
placeholder{
  color: #757575;
}
footer{
    color: $footer-font-color;
    //padding: 50px 80px;
  background-color: $black;
  b{
      color: $yellow;
    }
  small{
    color: darkgrey;
    a{
      color: darkgrey;
    }
  }
}

@media screen and (max-width: 575px) {
  .m-sm-auto {
    margin: auto !important;
  }
}