<!-- Checkout-->
<div class="checkout">
  <!-- Checkout content-->
  <div class="checkout__inner">
    <!-- Credit card-->
    <div class="card">
      <!-- Flip container-->
      <div class="flip">
        <!-- Flip front-->
        <div class="flip__front shown">
          <!-- Card front-->
          <div class="card__front">
            <!-- Card logo-->
            <div class="card__logo top-right"></div>
            <!-- Card chip-->
            <div class="card__chip"></div>
            <!-- Card number-->
            <div class="card__number"></div>
            <!-- Card name-->
            <div class="card__holder-name"></div>
            <!-- Card expiration-->
            <div class="card__exp"></div>
          </div>
        </div>
        <!-- Flip back-->
        <div class="flip__back">
          <!-- Card back-->
          <div class="card__back">
            <!-- Card strip-->
            <div class="card__strip"></div>
            <!-- Card ccv-->
            <div class="card__ccv"></div>
            <!-- Card logo-->
            <div class="card__logo bottom-right"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Checkout form-->
    <form class="form">
      <!-- Card number-->
      <fieldset>
        <label for="card-number-1" class="form__label">Card number</label>
        <input id="card-number-1" type="tel" minlength="4" maxlength="4" placeholder="1234" class="form__input small"/>
        <input id="card-number-2" type="tel" maxlength="4" placeholder="5678" class="form__input small"/>
        <input id="card-number-3" type="tel" maxlength="4" placeholder="9000" class="form__input small"/>
        <input id="card-number-4" type="tel" maxlength="4" placeholder="4321" class="form__input small"/>
      </fieldset>
      <!-- Card name-->
      <fieldset>
        <label for="card-holder-name" class="form__label">Card Holder</label>
        <input id="card-holder-name" type="text" placeholder="Name" class="form__input large"/>
      </fieldset>
      <!-- Card expiration-->
      <fieldset>
        <label for="card-exp-month" class="form__label">Expiration Date</label>
        <select id="card-exp-month" class="form__select small">
          <option value="">MM</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <select id="card-exp-year" class="form__select small">
          <option value="">YYYY</option>
          <option value="16">2016</option>
          <option value="17">2017</option>
          <option value="18">2018</option>
          <option value="19">2019</option>
          <option value="20">2020</option>
          <option value="21">2021</option>
          <option value="22">2022</option>
          <option value="23">2023</option>
          <option value="24">2024</option>
          <option value="25">2025</option>
        </select>
      </fieldset>
      <!-- Card ccv-->
      <fieldset>
        <label for="card-ccv" class="form__label">CCV</label>
        <input id="card-ccv" type="tel" maxlength="3" placeholder="123" class="form__input small"/>
      </fieldset>
      <!-- Form submit-->
      <fieldset>
        <button class="form__btn submit">Submit Payment<i class="fa fa-lock"></i></button>
      </fieldset>
    </form>
  </div>
</div>

// Libraries
@import "bourbon";
@import "neat";

// Fonts
@import url("https://fonts.googleapis.com/css?family=Droid+Sans+Mono|Source+Sans+Pro");

// Colors
$athensgray: #ECECEE;
$brightgray: #373D46;
$bluecard: #006299;
$lynch: #6C7C95;
$graychateau: #9EA1A7;
$logan: #AAB0CB;

// Base
html,
body {
    height: 100%;
    width: 100%;
}

html {
    font-size: 1em;
    // Scale font-size for mobile
    @media(max-width: em(480px)) {
        font-size: 1.125em;
    }
}

body {
    // Thanks, SubtlePatterns.com!
    background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/grey_wash_wall.png");
    font-family: 'Source Sans Pro', sans-serif;
    margin-top: 4rem;
    position: relative;
}

// Checkout
.checkout {
    @include outer-container(24rem);    
    background-color: $athensgray;
    border-radius: .25rem;
    box-shadow: 0 0 8em $brightgray;
    min-width: 20rem;
    // Base width @ 320px
    &__inner {
        @include outer-container(20rem);
        bottom: 2em;
        position: relative;
    }
}

// Credit Card
.card {   
    border-radius: 1rem;
    color: $athensgray;
    font-family: 'Droid Sans Mono', monospace;
    height: 12.611rem;
    margin-bottom: 2rem;
    position: relative;
    text-transform: uppercase;
    width: 20rem;
  
    
    // Card front
    &__front {
        height: 50%;
        padding: .5rem 1.5rem 0;
        position: relative;
        top: 50%;
      
        
        // Card Labels
        &:before,
        &:after {            
            content: "";
            bottom: 2rem;
            color: $graychateau;
            font-size: .5rem;
            position: absolute;            
        }
        &:before {
            content: "Card Holder"
        }
        &:after {
            content: "Expires";
            right: 1.5rem;
        }
    }
    
    // Logo
    &__logo {
        background-image: url("https://s32.postimg.org/9g0hrlhyt/visa_logo.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 2.75rem;
        position: absolute;
        width: 4rem;
        z-index: 3;
        
        // Logo modifiers
        &.top-right {
            top: -6rem;
            right: 1rem;
        }
        &.bottom-right {
            bottom: .75rem;
            right: 1rem;
        }
    }
    &__chip {
        background: url("https://s32.postimg.org/bs9qd2q05/card_chip.png") no-repeat center center;
        background-size: cover;
        height: 3rem;
        left: 1.4rem;
        position: absolute;
        top: -3rem;
        width: 3rem;
    }
    &__number {
        font-size: 1.325rem;
        left: 1.5rem;
        letter-spacing: .1rem;
        position: absolute;
    }
    &__holder-name {
        bottom: 1rem;
        display: inline-block;
        float: left;
        font-size: .8rem;
        left: 1.5rem;
        max-width: 14rem;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &__exp {
        bottom: 1rem;
        display: inline-block;
        float: right;
        font-size: .8rem;
        position: absolute;
        right: 1.5rem;
    }
    &__strip {
        background-color: #222;
        height: 2rem;
        margin-top: 1.5rem;
        width: 100%;
    }
    &__ccv {
        background-color: #fff;
        border-radius: .25rem;
        color: $brightgray;
        font-size: .75rem;
        font-style: italic;
        font-weight: 600;
        height: 1.5rem;
        line-height: 1.5rem;
        margin: 1.5rem auto 0;
        max-width: 17rem;        
        padding-right: .5rem;
        position: relative;
        text-align: right;
        
        &:before {
            content: "CCV";
            color: $athensgray;
            font-size: .5rem;
            font-style: normal;
            font-weight: 400;
            position: absolute;
            right: .5rem;
            top: -1.25rem;
        }
    }
}

// Flip
.flip {
    @include transition(250ms ease);
    border-radius: 1rem;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    width: 100%;
  box-shadow: 0 5px 20px 5px rgba(1, 25, 45, 0.3);
    
    // Show/Hide
    &__front,
    &__back {
        @include transition(250ms ease);
        background-color: $bluecard;
        border-radius: 1rem;
        left: 0;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
        visibility: hidden;
        z-index: 1;
        &.shown {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }
    }
    &__back {
        transform: rotateY(180deg);
    }
}

// Form
.form {
    padding: 0 1rem;
    
    // Lobotomized Owl selector (Google it) for fieldset elements
    > * + * {
        margin-top: 1rem;
    }
    
    // Form labels
    &__label {
        display: block;
        font-size: .75rem;
        margin-bottom: .25rem;
        max-width: 8rem;
        text-transform: uppercase;
    }
    
    // Form elements
    &__input,
    &__select,
    &__btn {        
        background-color: transparent;
        border: 1px solid rgba($graychateau, .5);
        border-radius: .25rem;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        height: 2rem;
        line-height: normal;
        outline: none;
        margin: 0;
        padding: .25rem;
        
        // Remove vendor styling
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        
        // Input states
        &:active,
        &:hover,
        &:focus {
            outline: none;
        }        
    }
    
    // Inputs
    &__input,
    &__select {
        
        // Input modifiers
        &.small {
            @include span-columns(3);
        }
        &.large {
            @include fill-parent();
        }
    }
    
    // Form buttons
    &__btn {
        &.submit {
            @include fill-parent();
            background-color: $bluecard;
            box-shadow: 0 2px 4px $graychateau;            
            color: $athensgray;            
            cursor: pointer;            
            height: auto;
            margin-top: 1rem;
            padding: 1rem;
            position: relative;
            text-transform: uppercase;
        }
        i {
            position: relative;
            top: .05rem;
            margin-left: .5rem;
        }
    }
}

var checkout = {

    el: {
        // Inputs
        cardNumberInput: $('[id^="card-number"]'),
        cardHolderNameInput: $("#card-holder-name"),
        cardExpInput: $('[id^="card-exp"]'),
        cardExpMonthInput: $("#card-exp-month"),
        cardExpYearInput: $("#card-exp-year"),
        cardCCVInput: $("#card-ccv"),
        // Containers
        cardNumberContainer: $(".card__number"),
        cardHolderNameContainer: $(".card__holder-name"),
        cardExpContainer: $(".card__exp"),
        cardCCVContainer: $(".card__ccv"),
        // Flip
        flip: $(".flip"),
        flipFront: $(".flip__front"),
        flipBack: $(".flip__back")
    },
    // Main init
    init: function() {
        checkout.bindUIActions();
    },
    // Binding UI actions
    bindUIActions: function() {
        checkout.el.cardNumberInput.on("keyup", checkout.displayCardNumber);
        checkout.el.cardHolderNameInput.on("keyup", checkout.displayCardName);
        checkout.el.cardExpInput.on("change", checkout.displayCardExp);
        checkout.el.cardCCVInput.on("keyup", checkout.displayCardCCV);
        checkout.el.cardCCVInput.on("focus", checkout.flipCard);
        checkout.el.cardCCVInput.on("blur", checkout.resetFlip);
    },
    // Displaying card number
    displayCardNumber: function() {
        var cardNumber = "";
        // Building the credit card number 
        checkout.el.cardNumberInput.each(function() {
            cardNumber += $(this).val() + ' ';
        });
        // Auto-focus next input if character count is greater than 3
        $(this).val().length > 3 ?
            $(this).next().focus() : false;
        // Auto-focus previous input if character count is 0
        $(this).val() == "" ?
            $(this).prev().focus() : false;
        // Displaying credit card number
        checkout.el.cardNumberContainer.html(cardNumber);
    },
    // Displaying card name
    displayCardName: function() {
        checkout.el.cardHolderNameContainer.html(checkout.el.cardHolderNameInput.val());
    },
    // Displaying expiration date
    displayCardExp: function() {
        // Displaying nothing if both date fields are empty
        if (checkout.el.cardExpMonthInput.val() === "" && checkout.el.cardExpYearInput.val() === "") {
            checkout.el.cardExpContainer.html("");
        } else {            
            checkout.el.cardExpContainer.html(checkout.el.cardExpMonthInput.val() + "/" + checkout.el.cardExpYearInput.val());
        }
    },
    // Displaying card ccv
    displayCardCCV: function() {
        checkout.el.cardCCVContainer.html(checkout.el.cardCCVInput.val());
    },
    // Showing back of the card
    flipCard: function() {
        checkout.el.flip.css("transform", "rotateY(180deg)");
        checkout.el.flipFront.removeClass("shown");
        checkout.el.flipBack.addClass("shown");
    },
    // Showing front of the card
    resetFlip: function() {
        checkout.el.flip.removeAttr("style");
        checkout.el.flipBack.removeClass("shown");
        checkout.el.flipFront.addClass("shown");
    }
};

checkout.init();