$grey800: #383838;
$grey300: #8E8E8E;
$grey200: #C1C1C1;
$grey100: #F6F6F6;
$grey50: #FBFBFB;
$greyAPI: #E5E8EB;

$green: #00AA3C;
$green-hovered: #018630;
$red: #EA3737;
$yellow: #FFB200;
$blue: #0038D2;
$pink: $blue; // #FA50B5
$blue-op: rgba(0, 114, 227, 0.15);
$blue-hovered: #01114A;
$white: #FFF;
$putty: #E2E4DD;
$grey: #828C97;
$characoal: #24262B;
$black: #000;

#header {
    justify-content: center;
    display: flex;
    margin: 0 20px 20px 20px;
    max-width: 100%;
    padding: 0;
    background: transparent !important;
    box-shadow: none;
    width: 100%;
    text-align: center;

    .product-header-body{
        margin: 0 auto;
    }

    .product-icon {
        display: none;
        padding: 0.5rem 1rem;

        img {
            width: 94px;
            height: 94px;
            object-fit: contain;
        }
    }

    .product-header-body {
        text-align: center;
        padding-bottom: 15px;

        h1,
        h2,
        h3 {
            color: $black;
            margin-left: 0;
        }
    }
}

#packages {
    justify-content: center;
    margin-top: 20px;

    ul>li article.featured {
        margin-top: 0;

        .offer .price var {
            color: $black;
        }

        h2 {
            background: $pink;
            color: $white;
        }

        .ribbon {
            display: none;
        }
    }


    .card {
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(208, 208, 208, 0.6);

        &.featured {
            header h2{
                background-color: $pink;
                color: $white;
            }
        }

        header {

            h2 {
                height: 20px;
                background: $putty;
                color: $grey;
                width: 100%;
                padding: 25px 0;
            }

            h3 {
                text-transform: none;
                font-weight: 500;
            }
        }

        .body {
            .price var{
                color: $black;
                font-size: 40px;

            }

            .support,
            .limits {
                display: none;
            }

            .licenses{
                margin: 1rem auto;
                background-color: $grey100;

                ul{
                    padding: 0 18px;

                    li.selected{
                        background-color: transparent;
                    }
                }


                span, input, select, label, a, div, th, td{
                    color: $black;
                }
            }

            .cta{
                a{
                    &:hover{
                        text-decoration: none;
                    }
                }
            }
        }

    }

    .btn {
        display: flex;
        justify-content: center;


        button {
            width: 80%;
            max-width: 220px;
            padding: 1rem 0.5rem !important;
            transition: all 0.2s;
            font-size: 18px;
        }
        .btn-primary {
            text-decoration: none;
            border-radius: 50px;
            border: 0.5px solid $pink;
            background: transparent;

            span{
                color: $pink;
            }

            img {
                display: none;
            }

            &:hover,
            &:active,
            &:focus {
                background-color: $pink;
                box-shadow: none;

                span{
                    color: $white;
                }
            }
        }

        .btn-tertiary {
            text-decoration: none;
            border: 0.5px solid #929292;
            background: transparent;
            border-radius: 50px;
            padding: 4px 8px;
            margin-left: 5px;

            &:hover,
            &:active,
            &:focus {
                border: 0.5px solid $black;
                color: $black;
                box-shadow: none;
            }

            span {
                text-transform: math-auto;
                color: $black;
            }

        }
    }

    ul>li article {
        .cta button.btn-tertiary span {
            color: $grey;
            font-size: 18px;
        }

        .features {
            border: 0;

            li:before {
                filter: grayscale(1);
            }
        }
    }
}

#billing_cycle{
    .btn{
        border: 1px solid $blue;
        border-radius: 50px;
    }

    .slider{
        background-color: $blue;
    }

    .tab-slider{
        font-size: 16px;
        background: transparent;
        box-shadow: none;
        border-radius: 50px;
        ul{
            li{
                font-weight: 500;
                border-left: 1px solid $blue;

                &.selected{
                    background: $blue;
                    color: $white;
                    font-weight: 500;
                }
            }
        }
    } 
}

.card header h3 {
    padding: 5px 15px;
}


.tab-slider ul li.selected {
    background: linear-gradient(226.26deg, #F2EAFB 5.44%, #EDF4FE 91.57%);
    color: #7121AF;
}

button.btn-primary {
    background: #7121AF;
    border: 0;
}

#currencies_dropdown{ // Hide bugged currencies selector on plans page
    display: none;
}

/* Main header */
#header.card{
    background: $greyAPI;

    .product-header-body *{
        color: black;
        margin: 0 auto;
    }
}

.button-primary{
    background: $blue !important;
    color: $white !important;
}