//-
    ## Inspiration (Thanks guys!):
        Supah -- https://dribbble.com/shots/2522482-Daily-UI-002-Credit-Card-Checkout
        plearns -- https://dribbble.com/shots/2326654-Credit-Card-Current-Balance            
    
    ## Assets
        Background image credit to SubtlePatterns.com
        Logo credit to VISA
        
    ## Improvement Ideas:
        - Client side validation
        - Create a Jade loop to populate the <option> tags
        - Detect card brand by first card number (e.g., 3 for Amex, 4 for Visa, etc..)
        - Hover/animations
    
    ## Feel free to use the code however you'd like!
    
    Happy coding :)

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

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

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

// Colors
$athensgray: #ECECEE;
$blueribbon: #0659f4;
$brightgray: #373D46;
$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%;
    
    // Show/Hide
    &__front,
    &__back {
        @include transition(250ms ease);
        background-color: $brightgray;
        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: $blueribbon;
            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();