@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap');
@font-face {
    font-family: 'Futura';
    src: url(/fonts/FuturaMediumBT.woff?303d918d0daf475a8eb82d05a7cdc04f) format("WOFF");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'futurabold';
    src: url(/fonts/futurabold-webfont.woff2?190cc742fc02469b5b89950ff4e23f7c) format("woff2"), url(/fonts/futurabold-webfont.woff?5d143ef80630635ec662137c5267bce5) format("woff"), url(/fonts/FuturaBold.ttf?4c62644b159530ff6214336f8cfb1d32) format("truetype");
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.3px;
}


$font-family: "Futura", 'Nunito', Helvetica, Arial, sans-serif;
$font-family-bold: "futurabold", 'Nunito', Helvetica, Arial, sans-serif;

$primary: #03237F;
$bg-color: #FBFBFB; //rgb(50,50,50);
$font-color: #000;
$white-font-color: #fff;
$header-font-color: #fff;
$footer-font-color: #fff;

$yellow: rgb(245,202,60);
$black: #000;
$blue-light: #2b96af;
$blue-bright: #40BEDD;
$blue-dark: #095B92;
$purple: #CF9AD8;
$error-color: $font-color;
$btn-green: #00FF00;
$primary-black-25 : #02195f;
$header-title-color: $black;

$checkbox-tick: $yellow;
$checkbox-unchecked-border: $purple;
$checkbox-unchecked-bg: $bg-color;
$checkbox-checked-bg: $purple;
$checkbox-checked-border: $purple;

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

$voucher_card-bg: $bg-color;
$voucher_card-color: $font-color;
$voucher_card-title-color: $blue-dark;

$voucher_card-claimable_button-bg: $purple;
$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: $purple;
$voucher_card-usable_button-color: $white-font-color;
$voucher_card-unusable_button-bg: grey;
$voucher_card-unusable_button-color: #D9D9D9;


$voucher_usage-bg: $primary;
$voucher_usage-color: $white-font-color;
$voucher_usage-button-bg: $btn-green;
$voucher_usage-button-color: $black;

$voucher_checkbox-bg: $primary;
$voucher_checkbox-color: $bg-color;
$voucher_checkbox-label-bg: $bg-color;
$voucher_checkbox-label-color: $font-color;

$register-modal-bg: $primary;
$register-modal-color: $bg-color;
$register-modal-title-color: $white-font-color;
$register-modal-button-bg: $btn-green;
$register-modal-button-color: $black;

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

.container {
    padding: 0;
}

//.navbar {
//    .navbar-brand {
//        color: $navbar-brand-color;
//        max-width: 60%;
//
//        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-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 {

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

    .voucher_card-wrapper {
        position: relative;
        background-color: $voucher_card-bg;
        color: $voucher_card-color;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
        border-radius: 5px;
        overflow: hidden;
        border:0;

        //@media screen and (max-width: 479px) {
        //    margin-left: 0;
        //    margin-right: 0;
        //}
    }
    .voucher_card-content {
        display: flex;
        flex-direction: column;
        font-size: .8rem;
        line-height: 1.2;
        color: #222;
        font-family: $font-family;
        @media screen and (max-width: 479px) {
            font-size: .6rem;
        }
        .voucher_card-title {
            //color: $voucher_card-title-color
            color: $primary;
        }
    }

    .voucher_card-image {
        width: 100%;
        padding-top: 100%;
        //height: 210px;
        //max-height: 40vh;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;

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

    .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;
        cursor: pointer;
        border-radius: 0em;
        font-weight: bold;
        letter-spacing: 1px;
        position: absolute;
        bottom: 0;
        width: 100%;
        font-size: 12px;
        line-height: 1.2;
        height: 30px;
    }

    .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;
    }

}


// use_voucher
.voucher_checkbox {
    margin: 0;

    .voucher_card-wrapper {
        box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
        background-color: $voucher_checkbox-bg;
        color: $voucher_checkbox-color;
        margin: 0.75em;
        @media screen and (max-width: 479px) {
            margin: 0.3em;
        }
    }


    .voucher_checkbox-image {
        height: 100px;
        background-size: cover;
        background-position: center center;
    }

    .voucher_checkbox-checbox {

    }

    .voucher_checkbox-label {
        // display: block;
        align-items: center;
        margin: 0;
        background-color: $voucher_checkbox-label-bg;
        color: $voucher_checkbox-label-color;
    }

    .voucher_checkbox-tc {
        font-size: 12px;
        .arrow {
            border-color: $voucher_checkbox-color;
        }
    }
}

// use_voucher

#use_voucher-modal {
    @mixin display-flex {
        display: flex;
        flex-direction: column;
    }
    @mixin display-none {
        display: none;
    }
    @mixin display-inline-block {
        display: inline-block;
    }

    .status-claimed,
    .status-complete,
    .status-default,
    #use_voucher-modal-submit,
    #use_voucher-modal-submit-generic,
    #use_voucher-modal-next,
    #use_voucher-modal-finish,
    #use_voucher-modal-close {
        @include display-none;
    }

    &[status='default'] .status-default,
    &[status='claimed'] .status-claimed,
    &[status='scanned'] .status-claimed,
    &[status='complete'] .status-complete {
        @include display-flex;
    }

    &[status='default'] #use_voucher-modal-submit,
    &[status='default'] #use_voucher-modal-submit-generic,
    &[status='claimed'] #use_voucher-modal-next,
    &[status='scanned'] #use_voucher-modal-finish,
    &[status='complete'] #use_voucher-modal-close {
        @include display-inline-block;
    }
}


#voucher_usage-slider{
    width: 100%;
    display: block;

    .carousel-indicators{
        position: relative;
        height: 40px;
        display: flex;
        padding: 0;
        justify-content: space-between;
        align-items: center;
        width:75%;
        margin: 0 auto;

        .carousel-progress,
        &:before{
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            height: 3px;
            width: 100%;
            transform: translate(0%, -50%);
            transition: .6s ease;
        }
        &:before{
            background: $primary-black-25;
        }
        .carousel-progress{
            background: $white-font-color;
        }

        li {
            width: 40px;
            height: 40px;
            color: black;
            font-size: .9rem;
            text-indent: 0;
            text-align: center;
            line-height: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin: 0;
            opacity: 1;
            transition: .6s ease;
            border: 0;
            z-index: 1;
        }

        li.unchecked{
            background: $white-font-color;
            color: $primary;
        }
        li.active{
            background: $blue-bright;
            color: $white-font-color;
            box-shadow: 3px 3px 20px 5px rgb(0 0 0 / 35%)        }
        li.checked{
            background: $primary-black-25;
            color: $white-font-color;
        }

    }
    .voucher_usage-slider-item{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 2rem 1rem;
        margin: 0 auto;
    }
    .carousel-item{
        width: 90%;
        padding-left: 10%;
    }
    .carousel-inner:before{
        content: "";
        position: absolute;
        top:0;
        left: 10%;
        width: 80%;
        height: 100%;
        //background: $primary-black-25;
        transition: .3s ease;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 8.5%;
    }
}



#voucher_usage {
    //background-color: $voucher_usage-bg; // follow template
    //color: $voucher_usage-color; // follow template
    //padding: 20px 10px 0px;
    text-align: center;
    //margin-bottom: 1em;
    .form-row {
        justify-content: center;

        .form-group {
            //margin: 0 3px;
        }

    }

    h6{
        //color: $voucher_usage-color;
    }

    #voucher_usage-submit {
        box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
        background-color: $voucher_usage-button-bg;
        color: $voucher_usage-button-color;
    }

    //#code {
    //    input {
    //        height: calc(2em + 0.75rem + 2px);
    //        width: calc(2em + 0.75rem + 2px);
    //        margin: 0 auto;
    //        text-align: center;
    //        padding: 0;
    //    }
    //}

    #transaction-amount-div {
        width: calc((2em + 0.75rem + 2px + 20px)*4 - 20px);
        margin: 1em auto;
        .input-group-text {
            background-color: white;
        }
    }
}

.voucher_usage-container {

    .error {
        color: red;
        margin: 10px auto;
    }

    .text {
        font-size: 14px;

        li:last-child {
            margin-bottom: 1em;
        }

        &.error {
            color: red;
        }

        &.success {
            padding: 0;
            font-weight: 600;
            text-align: center;
            font-size: 18px;
            color: $voucher_usage-bg;
        }
    }
}

#voucher_usage-carousel {
    background: rgba(0,0,0.25);
}


.voucher_checkbox .form-check {
     margin: 0;
     padding: 0;


    .label {
        display: inline-flex;
        align-items: center;
        width: 100%;

        .text {
            font-size: 1rem;
            width: 100%;
        }

        .checkbox {
            position: relative;
            display: inline-block;
            color: $font-color;
            text-align: center;
            height: 15px;
            width: 15px;
            margin: auto;
            border: 1px solid $checkbox-unchecked-border;
            background-color: $checkbox-unchecked-bg;
            border-radius: 3px;

            .tick {
                &:after {
                    border-color: $checkbox_tick;
                }
            }
        }
    }
    input[type="checkbox"] {
        display: none;
        & + span>.checkbox .tick{
            opacity: 0;
        }

        &:checked {

            & + span>.checkbox {
                background-color: $checkbox-checked-bg;
                border: 1px solid $checkbox-checked-border;
            }

            & + span>.checkbox .tick{
               opacity: 1;
            }
        }
    }
    // $checkbox-tick: $yellow;
    // $checkbox-checked-border: $blue-dark;
    // $checkbox-unchecked-border: $blue-dark;
    // $checkbox-checked-bg: $blue-light;
    // $checkbox-unchecked-bg: $blue-light;
}




.voucher_card-checkbox{
    display: none;
}
//.voucher_card-wrapper::after{
//    content :"";
//    position: absolute;
//    bottom:0;
//    width: 100%;
//    height: 0px;
//    background: transparent;
//}
.voucher_card-check-display {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 25px;
    height: 25px;
    border: 1px solid #b6bdd3;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    z-index: 2;
    align-items: center;
    background: #fff;
    span{
        color: transparent;
        -webkit-transform: rotate(-10deg) scale(.75);
        transform: rotate(-10deg) scale(.75);
    }
}
.voucher_card-checkbox:checked + .voucher_card-label {
    //.voucher_card-wrapper::after{
    //    background: $primary;
    //    height: 5px;
    //    transition: .3s ease;
    //}
    .voucher_card-wrapper{
        transition: .3s ease;
        //box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        //box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        //animation: zoomCard .5s ease-in-out forwards;
        //-webkit-animation: zoomCard .5s ease-in-out forwards;

    }
    @keyframes zoomCard {
        0%,100% {
            box-shadow: 2px 2px 3px rgb(0 0 0 / 10%);
        }
        75% {
            box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
        }
    }
    .voucher_card-check-display{
        background: $primary;
        color: #fff;
        transition: .3s ease;
        span{
            color: #fff;
            transition: .3s ease-in-out;
            -webkit-transform: rotate(0) scale(1.25);
            transform: rotate(0) scale(1.25);
        }
    }
    .voucher_card-claimable {
        background: $primary !important;
        color :#fff !important;
    }

}
.voucher_card-label--disabled{
    .voucher_card-check-display {
        background: #cbd0dc;
        display: none;
    }
    .voucher_card-image{
        background-color: #f5f5f5 ;
        filter: brightness(0.75) opacity(.75);
    }

}

// cart footer
.voucher_cart {
    position: sticky;
    position: -webkit-sticky;
    bottom: 0px;
    background: #fff;
    width: 100%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px -8px 24px;
    z-index: 10;
    line-height: 1.2;

    @media screen and (max-width: 575px) {
      font-size: .75rem;
    }

    .col{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 50px;
    }
    &-cta{
        background: $primary;
        color: #fff;
        cursor: pointer;
        transition: .3s ease;
    }
    &-cta.inactive{
        background: grey;
        transition: .3s ease;
    }

    &-num-text{
        line-height: 1.2;
    }
    &-count{
        color: $primary;
        font-size: 1.3rem;
    }
}