/**
 ******************************************************
 ******************************************************
 * {LESS} :: PRICES :: (upplication, 2016)
 ******************************************************
  *****************************************************
 */

@import "../base/_common.less";


#pricing {
  &.pricing-tables {
    padding: 6em 0 0 0;

    // each Tab navlink
    .tabs {
      line-height: 70px;

      // each Tab
      .tab {
        text-transform: inherit;

        a {
          color: @main-green;
          font-weight: 600;
          letter-spacing: 0;
          font-size: 25px;
          line-height: 25px;

          &:hover {
            color: @accept-btn-hover;
          }

          em {
            font-style: normal;
          }
        }
      }

      // each Tab underline
      .indicator {
        position: absolute;
        bottom: 8px;
        height: 2px;
        background-color: @main-green;
        will-change: left, right;

        &:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: relative;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
          border-top: 10px solid @main-green;
          bottom: 0;
          z-index: 10;
          will-change: left, right;
          left: 45%;
        }
      }
    }
  }

  // Common FEATURES in all Pricing Plans
  .plans-head {
    padding: 0;

    .prices-common-features {
      margin-top: 50px;
      text-align: left;
      font-size: 18px;
      font-weight: 500;

      // title
      p {
        padding-bottom: 20px;
        text-align: center;
      }

     // Features list
      ul {
        li {
          display: inline-block;
          width: ~"calc(20% - 10px)";
          padding: 10px 5px;
          text-align: center;
          font-size: 15px;
          vertical-align: text-top;
          // responsive behaviour
          @media screen and (max-width: 1080px) {
            width: ~"calc(25% - 10px)";
          }
          @media screen and (max-width: 920px) {
            width: ~"calc(33.3333% - 10px)";
          }
          @media screen and (max-width: 667px) {
            width: ~"calc(50% - 20px)";
            padding: 10px;
          }
          @media screen and (max-width: 420px) {
            width: ~"calc(100% - 20px)";
          }

          b {
            font-weight: 600;
          }

          img {
            display: block;
            width: 120px;
            height: 120px;
            margin: 0 auto 15px auto;
          }
        }
      }
    }
  }

  // Bottom TAX ADVISE
  .tax {
    padding-top: 10px;

    p {
      font-size: 16px;
      font-weight: 500;
      padding-left: 30px;
      &:last-child {
        padding-left: 15px;
      }

      i {
        color: @light-lilac;
        font-size: 10px;
        padding-right: 5px;
        top: -3px;
      }
    }
    // Currency Selector
    &.currency-selector {
      margin-top: 30px;
      margin-bottom: 15px;
      padding-left: 40px;

      span {
        position: relative;
        bottom: 2px;
      }

      a {
        padding: 0 10px;
        font-size: 18px;
        font-weight: 600;
        color: @dark-lilac;
        cursor: pointer;

        &::before {
          display: inline-block;
          margin-right: 5px;
          padding: 0 9px;
          background-color: @bg-lilac-light;
          .border-radius(50%);
          color: @darkest-lilac;
          font-weight: 400;
        }

        &[data-currency="EUR"]::before {
          content: '€';
        }
        &[data-currency="USD"]::before {
          content: '$';
        }
        &[data-currency="MXN"]::before {
          content: '$';
        }

        &:hover, &.active {
          .anim(all, 150ms, ease);
          color: @darkest-lilac;

          &::before {
            background-color: @main-green;
            color: @white;
          }
        }
      }
    }
  }

  // Best Seller Product badge
  .best-seller {
    position: absolute;
    top: -5px;
    right: 15px;
    z-index: 200;
    width: 45px;
  }

  /* ... PRICING Plan TABLES ... */

  // Common styles in Pricing Plans Tables
  .pricing-table-grid {
    border: 1px solid @header-border;
    .anim(all, .5s, ease);

    // Plan Name
    h3 {
      text-align: center;
      display: block;
      margin: 0;
      padding: 1em 0 0 0;
      display: block;
      color: @darkest-lilac;
      text-transform: uppercase;
      font-size: 1.5em;
    }

    // Plan Subtitle
    h5 {
      text-align: center;
      font-size: .95em;
      color: @dark-lilac;
    }

    // Plan image
    img {
      margin-top: 10px;
      width: 100px;
      height: auto;
    }

    // Plan Features List
    ul {
      margin: 0;
      padding: 0;

      li {
        list-style: none;
        text-align: center;
        border-bottom: 1px solid @header-border;
        font-size: 15px;

        a,
        span {
          padding: .8em 1em;
          display: block;
          text-decoration: none;
          text-align: left;
          pointer-events: none;
        }

        span {
          text-align: center;
          padding: .5em 0;
          background: @white;
          font-size: 1.8em;
          font-weight: 700;
          .anim(all, .5s, ease);

          &:not(.price) {
            .anim-info-opacity(.3s);
          }

          em {
            font-style: normal;
            font-size: 15px;
            padding-left: 10px;
          }
        }

        a {
          max-width: 280px;
          margin: 0 auto;

          &:hover {
            color: @main-green;
          }

          i {
            padding-right: 10px;
            color: @light-lilac;
          }

          b {
            font-weight: 400;
            color: @light-lilac;
          }
        }

        &.price-container {

          & > span {
            span, em {
              display: inline-block;
              padding: 0;
            }
            span {
              font-size: 30px;
            }
          }

          .currency-image {
            padding: 0 5px;

            &:after {
              display: inline-block;
            }
          }

          &.price-currency-eur .currency-image:after {
            content: '€';
          }

          &.price-currency-usd .currency-image:after {
            content: '$';
          }

          &.price-currency-mxn .currency-image:after {
            content: '$MXN';
          }

          // special container showns meanwhite currency is loading (if there was an API request delay)
          &.price-loading {
            //.loader():
            padding: 8px 0;
            background: rgba(255,255,255,.8);
            z-index: 99999;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            pointer-events: none;
            .anim-info-opacity(.3s);

            span:not(.price) {
              display: block;
              visibility: visible;
              width: 50px;
              height: 50px;
              position: relative;
              border: 5px solid transparent;
              border-top: 5px solid @main-green;
              border-bottom: 5px solid @main-green;
              .border-radius(50%);
              .animation-infinite(1.3s);

              span.price,
              em {
                display: none;
              }
            }
            // to enable "upp-spin" animation
            @keyframes upp-spin {
              0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
              }
              100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
              }
            }
          }
        }
      }
    }

    // Trial BTN
    a.order-btn {
      padding: 1.5em 0;
      display: block;
      background-color: @light-lilac;
      text-align: center;
      font-family: 'Roboto Slab', serif;
      text-transform: uppercase;
      text-decoration: none;
      color: @darkest-lilac;

      i {
        opacity: 0;
        position: relative;
        top: 3px;
        font-size: 16px;
        color: @white;
        margin-left: -20px;

        &:before {
          .rotate(180deg);
        }
      }

      &:hover {
        color: @white ;

        i {
          opacity: 1;
          margin-left: 10px;
        }
      }
    }

    // Not "Best Seller" Pricing Plan
    &:not(.with-hover) {
      &:hover {
        border-color: @main-green;
        .scale(1.05);

        span {
          color: @main-green;
        }

        a.order-btn:hover {
          background-color: @main-green;
          color: @white;
        }
      }
    }

    // "Best Seller" Pricing Plan
    &.with-hover {
      border-color: @main-green;
      .scale(1.05);

      span {
        color: @main-green;
      }

      a.order-btn {
        background-color: @main-green;
        color: @white;

        &:hover {
          background-color: lighten(@main-green, 5%);
        }
      }
    }
  }
}


#mensual,
#anual {
  margin-top: 3em;
}

// PRICE CURRENCY SWITCHER (JS) BEHAVIOUR
//// EUR
.pricing-tables.selected-currency-eur .price-container.price-currency-eur { display: block; }
.pricing-tables.selected-currency-eur .price-container:not(.price-currency-eur) { display: none; }
//// USD
.pricing-tables.selected-currency-usd .price-container.price-currency-usd { display: block; }
.pricing-tables.selected-currency-usd .price-container:not(.price-currency-usd) { display: none; }
//// MXN
.pricing-tables.selected-currency-mxn .price-container.price-currency-mxn { display: block; }
.pricing-tables.selected-currency-mxn .price-container:not(.price-currency-mxn) { display: none; }

// Show default currency based on lang page
// Eur will be the default
html .price-container:not(.price-currency-eur) { display: none; }
html .price-container.price-currency-eur { display: block; }
// If lang is english, show USD $
html[lang=en] .price-container:not(.price-currency-usd) { display: none; }
html[lang=en] .price-container.price-currency-usd { display: block; }
// If the lang is bahasa, show USD$
html[lang=id] .price-container:not(.price-currency-usd) { display: none; }
html[lang=id] .price-container.price-currency-usd { display: block; }
// If lang is es-MX, show MEX$
html[lang=es-MX] .price-container:not(.price-currency-mxn) { display: none; }
html[lang=es-MX] .price-container.price-currency-mxn { display: block; }

/* ... Media Queries :: Pricing Plans view ... */
@media only screen and (max-width: 1180px) {
  #mensual,
  #anual {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100%;
  }
}


@media (min-width: 699px) and (max-width: 991px) {
  #pricing {
    .mobile-prices {
      width: 50%;
      margin-bottom: 25px;
    }
  }
}

@media (max-width: 699px) {
  #pricing .tax.currency-selector span {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
}

@media (max-width: 698px) {
  #pricing {
    .mobile-prices {
      width: 100%;
    }
  }
}

@media (max-width: 480px) {
  #pricing {
    .tabs .tab a {
      font-size: 22px;
    }
  }
}


@media only screen and (max-width: 780px) {
  #anual {
    .col.s12:not(.mobile-prices) {
      text-align: center;

      .alert {
        background-color: transparent;

        .monthless {
          padding: 15px;

          i {
            display: none;
          }
        }
      }
    }
  }
}


@media (max-width: 480px) {
  #pricing {
    .tabs .tab a {
      font-size: 22px;
    }
    .plans-head {
      .prices-common-features {
        font-size: 16px;
        padding: 0;

        i {
          font-size: 22px;
        }
      }
    }
  }
}