/*--------------------------------------------------------------------------------*/
/*--------------------------- GENERAL ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

/* Dear Next Developer,

I inherited this codebase from a third party and there was no budget for a complete refactor and clean up.
I was tasked with building four pages and then re-branding the existing pages.

My sincerest apologies for the copious amounts of "!important" tags in this stylesheet.

Due to time and budgetary constraints, I could not entirely remove the base /css/style.css as there were json api calls
being made and then content being styled dynamically when the call was resolved. The third party could not provide
an adequate test suite to test the styling of resolved elements. Life sucks.

I do not own the /css/style.css stylesheet and based on its unreadability, I felt it best to leave it alone than to
refactor it without a solid ability to test the code. I felt it was safer to load the original styles,
then this stylesheet and then force overrides where necessary.

I am fully aware that the coding standard of every page - except those explicitly listed below is shocking.
There was no budget to refactor. Life sucks, again.

Cheers,

Mike
*/


:root{
    --chitchatGold: #cc9933;
    --chitchatBlack: #000;
    --chitchatFonts: 'CircularStd', 'sans-serif';
}

/* ------------- TYPOGRAPHY STARTS --------- */
@font-face {
    font-family: 'CircularStd';
    src: url('../fonts/CircularStd-Bold.woff2') format('woff2'),
    url('../fonts/CircularStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'CircularStd';
    src: url('../fonts/CircularStd-Black.woff2') format('woff2'),
    url('../fonts/CircularStd-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'American Typewriter';
    src: url('../fonts/AmericanTypewriter.woff2') format('woff2'),
    url('../fonts/AmericanTypewriter.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.chit-chat-para-font {
    color: var(--chitchatBlack);
    font-family: var(--chitchatFonts);
    font-weight: 900;
}

.chit-chat-button-font {
    color: var(--chitchatBlack) !important;
    font-family: var(--chitchatFonts) !important;
    font-weight: 900 !important;
}

/* ------------- THEME COLOURS BEGINS --------- */
.chit-chat-brand-gold-background {
    background-color: var(--chitchatGold) !important;
}

.chit-chat-brand-gold {
    color: var(--chitchatGold);
}

.chit-chat-brand-black-background {
    background-color: var(--chitchatBlack) !important;
}

.chit-chat-brand-black {
    color: var(--chitchatBlack) !important;
}

/*--------------------------------------------------------------------------------*/
/*--------------------------- HEADERS ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5 {
    color: var(--chitchatBlack);
    font-family: var(--chitchatFonts);
    font-weight: 900;
}


/*--------------------------------------------------------------------------------*/
/*--------------------------- BUTTONS ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-brand-button-black,
.chit-chat-brand-button-gold,
.chit-chat-brand-button,
.chit-chat-button-link {
    border-radius: 1.7rem !important;
    font-family: var(--chitchatFonts);
    font-weight: 900;
}

.chit-chat-brand-button-gold,
.chit-chat-brand-button-gold-lg,
.chit-chat-brand-button {
    background-color: var(--chitchatGold) !important;
    color: var(--chitchatBlack);
}

.chit-chat-brand-button-black,
.chit-chat-brand-button-black-lg{
    background-color: var(--chitchatBlack) !important;
    color: white;
}

.chit-chat-brand-button-gold-lg,
.chit-chat-brand-button-black-lg {
    border-radius: 1.7rem !important;
    font-family: var(--chitchatFonts);
    font-weight: 900;
    font-size: 1.5rem;
}

/*--------------------------------------------------------------------------------*/
/*--------------------------- LINKS-----------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-button-link {
    background-color: var(--chitchatBlack);
    color: white;
    font-size: 80%;
    letter-spacing: .1rem;
    padding: 1rem;
    transition: all 0.2s;
}

.chit-chat-black-link {
    color: var(--chitchatBlack);
}

/*--------------------------------------------------------------------------------*/
/*--------------------------- FORM CONTROLS ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-form-label,
.chit-chat-form-label-lg,
.chit-chat-form-input,
.chit-chat-form-input-lg,
.chit-chat-form-input::placeholder,
.chit-chat-dropdown-select,
.chit-chat-submit-btn-gold,
.chit-chat-submit-btn-black {
    font-family: var(--chitchatFonts);
    font-weight: 900;
}


.chit-chat-form-input,
.chit-chat-dropdown-select,
.chit-chat-form-input-lg::placeholder,
.chit-chat-form-input::placeholder,
.chit-chat-submit-btn-gold {
    color: var(--chitchatBlack) !important;
}

.chit-chat-form-input,
.chit-chat-dropdown-select,
.chit-chat-form-input-lg {
    background-color: var(--chitchatGold) !important;
    border: none;
}


.chit-chat-submit-btn-black,
.chit-chat-submit-btn-gold,
.chit-chat-dropdown-select,
.chit-chat-form-label,
.chit-chat-form-label-lg {
    border-radius: 1.7rem !important;
}

.chit-chat-form-label,
.chit-chat-form-label-lg,
.chit-chat-submit-btn-black {
    background-color: var(--chitchatBlack);
    color: white !important;

}

.chit-chat-form-label {
    padding: 0.2rem 1rem 0.2rem 1rem;
}

.chit-chat-submit-btn-gold {
    background-color: var(--chitchatGold);
}

.chit-chat-submit-btn-black {
    background-color: var(--chitchatBlack);
}

.chit-chat-form-label-lg {
    font-size: 20px;
    max-width: 350px;
    width: 80%;
}

.chit-chat-form-input {
    border-radius: 50px;
    padding: 7px 20px;
}

.chit-chat-form-input-lg {
    border-radius: 1.0rem !important;
    min-height: 40px;
    max-width: 95%;
    margin: 0 auto;
}

.chit-chat-dropdown-select {
    width: 100% !important;
    min-height: 50px !important;
}

/*--------------------------------------------------------------------------------*/
/*--------------------------- NAVIGATION ------------------------------------------*/
/*--------------------------------------------------------------------------------*/
#mainNavigation {
    background-color: var(--chitchatBlack);
    border-bottom: 3px solid white;
}
#mainNavigation .nav-item a {
    font-family: var(--chitchatFonts);
    font-weight: 900;
}

.chit-chat-nav-bar {
    max-width: 450px;
    border-radius:1.05rem;
}

#chit-chat-social-icons .nav-link {
    padding: .5rem .8rem;
}

.chit-chat-nav-item-start,
.chit-chat-nav-item-end {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
@media only screen and (max-width: 600px) {
    .chit-chat-center-logo-mobile {
        margin: 0 auto;
    }
}

@media only screen and (max-width: 400px) {

    /*todo check for commented code and remove*/
    .chit-chat-nav-item-start {
        padding-left: 0 !important;
        padding-right: 0.5rem !important;
    }

    .chit-chat-nav-item-end {
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
    }

    .chit-chat-nav-item {
        font-size: 14px;
    }
}


/*--------------------------------------------------------------------------------*/
/*--------------------------- HOMEPAGE /index.html ------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*-----------------------------------------------*/
/* ------------- HOMEPAGE HERO IMAGE --------- */
/*-----------------------------------------------*/
.chit-chat-hero-image {
    background-image: url(../img/home/chit-chat-hero-image-new.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 770px;
}

@media only screen and (max-width: 800px) {
    .chit-chat-hero-image {
        min-height: 570px;
    }
}

@media only screen and (max-width: 600px) {
    .chit-chat-hero-image {
        min-height: 370px;
    }
}

@media only screen and (max-width: 400px) {
    .chit-chat-hero-image {
        min-height: 270px;
    }
}
/*-----------------------------------------------*/
/* ------------- HOMEPAGE SITE TAGLINE --------- */
/*-----------------------------------------------*/
h1.chit-chat-tagline,
.chit-chat-tagline {
    font-size: 25px;
    color: white;
    text-align: center;
    font-family: 'American Typewriter', 'sans-serif';
    letter-spacing: 2px;
}

/*---------------------------------------------------*/
/* ------------- HOMEPAGE FEATURED ACTIONS --------- */
/*---------------------------------------------------*/

#chit-chat-feature-actions .btn-block+.btn-block {
    margin-top: 0;
}

.chit-chat-featured-actions {
    font-size: 35px;
    max-width: 450px;
}

@media only screen and (max-width: 600px) {
    .chit-chat-featured-actions {
        font-size: 22px;
    }
}

/*--------------------------------------------*/
/* ------------- HOMEPAGE BUNDLES ----------- */
/*--------------------------------------------*/
.chit-chat-gold-hr {
    width: 95%;
    text-align: center;
    margin: 0 auto;
    height: 2px;
    color: var(--chitchatGold);
    background-color: var(--chitchatGold);
}

.chit-chat-bundle span,
.chit-chat-brand-bundles-header {
    font-family: var(--chitchatFonts);
}

.chit-chat-bundle span {
    font-weight: 900;
    font-size: 22px;
}


.chit-chat-bundle-price {
    color: var(--chitchatGold);
}

.chit-chat-bundle-data {
    color: black;
}

.chat-chat-image-link-bundle-wrapper {
    max-width: 80%;
    display: block;
}

.chit-chat-brand-bundles-header {
    background-color: var(--chitchatGold);
    border-radius: 1.1rem !important;
    color: black !important;
    font-size: 20px;
    font-weight: 300;
    font-family: var(--chitchatFonts);
}

/*--------------------------------------------*/
/* ------------- HOMEPAGE PROMOTIONS --------- */
/*--------------------------------------------*/
#chit-chat-promotions {
    background-color: black;
}

.chit-chat-looking-phone-button {
    font-size: 35px;
    width:90%;
}

.chit-chat-white-hr {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    height: 1px;
    color: white;
    background-color: white;
}

.chit-chat-double-data-button {
    font-size: 35px;
    max-width: 275px;
    width: 100%;
}

.chit-chat-try-double-data-header,
.chit-chat-try-double-data {
    font-size: 45px;
}

@media only screen and (max-width: 1100px) {
    .chit-chat-double-data-button,
    .chit-chat-looking-phone-button,
    .chit-chat-try-double-data-header {
        font-size: 22px;
    }
}

@media only screen and (max-width: 600px) {
    .chit-chat-double-data-button {
        font-size: 12px;
    }
}

@media only screen and (max-width: 450px) {

    .chit-chat-try-double-data-header {
        font-size: 20px;
    }

    .chit-chat-looking-phone-button {
        font-size: 18px;
    }

    .chit-chat-double-data-button {
        font-size: 15px;
    }
}

/*--------------------------------------------------------------------------------*/
/*--------------------------- HELP/ASSISTANCE PAGE /assistance.html ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

#chit-chat-help-page {
    background-image: url(/chitchat/assets/img/assistance/help-page-background-image-large-compressed.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    min-height: 1600px;
}

@media only screen and (max-width: 1200px) {
    #chit-chat-help-page {
        background-image: url(/chitchat/assets/img/assistance/help-page-background-image-compressed.jpg);
        min-height: 1200px;
    }
}

@media only screen and (max-width: 1000px) {
    #chit-chat-help-page {
        min-height: 1200px;
    }
}

@media only screen and (max-width: 600px) {
    #chit-chat-help-page {
        min-height: 700px;
    }
}


.chit-chat-help-page-menu {
    list-style-type: none;
    padding-inline-start:0;
    max-width:50%;
}

.chit-chat-help-page-menu-item {
    max-width:550px;
    border-radius: 0.8rem;
    font-size:35px;
    background-color: var(--chitchatGold);
    color: black;
    font-family: var(--chitchatFonts);
    font-weight: 900;
}

@media only screen and (max-width: 1000px) {
    .chit-chat-help-page-menu-item {
        font-size:25px;
    }
}

@media only screen and (max-width: 600px) {
    .chit-chat-help-page-menu-item {
        font-size:14px;
    }
}

@media only screen and (max-width: 360px) {
    .chit-chat-help-page-menu-item {
        font-size:12px;
    }
}


/*--------------------------------------------------------------------------------*/
/*--------------------------- FAQ PAGE  /new-faqs.html ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-accordion .card-header,
.chit-chat-accordion .card,
.chit-chat-accordion {
    background-color: var(--chitchatGold);
}

.chit-chat-accordion {
    border-radius: 1rem
}
.chit-chat-accordion .card {
    border: none;
}

.chit-chat-accordion .card-header a:hover {
    color: black;
}

.chit-chat-accordion .card-body {
    background-color: white;
    border: 1px solid var(--chitchatGold);
}

/*--------------------------------------------------------------------------------*/
/*--------------------------- MY ACCOUNT PAGE /myaccount.html ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-login-form {
    background-color: rgba(255, 255, 255, 0.50);
    border-radius: 1.0rem !important;
}

#chit-chat-my-account-form {
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 1200px;
    background-image: url("/chitchat/assets/img/myaccount/my-chit-chat-page-background-image-large-compressed.jpg");
    background-position: center;
}

@media only screen and (max-width: 600px) {
    #chit-chat-my-account-form {
        background-image: url("/chitchat/assets/img/myaccount/my-chit-chat-page-background-image.jpg");
        min-height: 800px;
    }
}

.chit-chat-login-button,
.chit-chat-forgotten-password {
    color: black;
    font-family: var(--chitchatFonts);
}

.chit-chat-login-button {
    background-color: var(--chitchatGold);
    border-radius: 1.5rem !important;
    font-weight: 900;
    font-size: 35px;
    width: 250px;
    max-width: 50%;
    padding: 0;
}

.chit-chat-forgotten-password {
    text-decoration: none;
}

/*--------------------------------------------------------------------------------*/
/*--------------------------- BUNDLES PAGE /new-bundles.html ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-bundle-list-data,
.chit-chat-bundle-list-price,
.chit-chat-bundle-buy-now {
    font-family: var(--chitchatFonts);
}



.chit-chat-bundles-list-row {
    background-image: url(/chitchat/assets/img/bundles/chit-chat-bundles-page-background-image-large-compressed.jpg);
    min-height: 1600px;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 1200px) {
    .chit-chat-bundles-list-row {
        background-image: url(/chitchat/assets/img/bundles/chit-chat-bundles-page-background-image-compressed.jpg);
        min-height: 1200px;
    }
}

@media only screen and (max-width: 600px) {
    .chit-chat-bundles-list-row {
        min-height: 700px;
    }
}

.chit-chat-bundles-list {
    list-style-type: none;
    padding-inline-start: 0;
    max-width: 100%;
    background-color: white;
    border-radius: 0.8rem;
    line-height: 1;
}


@media only screen and (max-width: 1000px) {
    .chit-chat-bundles-list {
        width: 55%;
    }
}


@media only screen and (max-width: 600px) {
    .chit-chat-bundles-list {
        width: 60%;
    }
}

.chit-chat-bundle-buy-now {
    border-radius: 0.8rem;
    font-size: 20px;
    background-color: var(--chitchatGold);
    color: black;
    font-weight: 900;
}

@media only screen and (max-width: 1000px) {
    .chit-chat-bundle-buy-now {
        font-size: 20px;
    }
}

@media only screen and (max-width: 600px) {
    .chit-chat-bundle-buy-now {
        font-size: 14px;
        padding: 0;
    }
}

@media only screen and (max-width: 360px) {
    .chit-chat-bundle-buy-now {
        font-size: 12px;
    }
}


.chit-chat-bundle-list-price {
    font-size: 70px;
}

.chit-chat-bundle-list-data {
    font-size: 50px;
}


@media only screen and (max-width: 800px) {
    .chit-chat-bundle-list-price {
        font-size: 50px;
    }

    .chit-chat-bundle-list-data {
        font-size: 35px;
    }
}

@media only screen and (max-width: 600px) {
    .chit-chat-bundle-list-price {
        font-size: 30px;
    }

    .chit-chat-bundle-list-data {
        font-size: 22px;
    }
}

@media only screen and (max-width: 400px) {
    .chit-chat-bundle-list-price {
        font-size: 22px;
    }

    .chit-chat-bundle-list-data {
        font-size: 16px;
    }
}



.chit-chat-bundle-cta {
    max-width: 70%;
}

.chit-chat-bundle-details {
    min-width: 30%;
}

@media only screen and (max-width: 600px) {
    .chit-chat-bundle-cta {
        max-width: 75%;
    }

    .chit-chat-bundle-details {
        min-width: 25%;
    }
}


/*--------------------------------------------------------------------------------*/
/*--------------------------- CONTACT PAGE /contact.html ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-card-header-black {
    background-color: black !important;
    color: white !important;
    padding: 15px 15px !important;
}


/*--------------------------------------------------------------------------------*/
/*--------------------------- ACCOUNT ACTIVITY PAGE /account-activity.html ------------------------------------------*/
/*--------------------------------------------------------------------------------*/

/*STYLES HERE ARE OWNED BY /css/style.css we will just override it here for simplicity as this page
 loads json data with styles etc.
 */

.simtab .nav .active {
    background: var(--chitchatGold) !important;
}

.simtab .nav-item {
    background: var(--chitchatBlack) !important;
    color: white !important;
}



/*--------------------------------------------------------------------------------*/
/*--------------------------- ANY PROMO MARKETING PAGE BUILT FORM TEMPLATE chit-chat-promo-template.html ------*/
/*--------------------------------------------------------------------------------*/

.chit-chat-promo-feature-tick {
    width: 20px;
    height: 20px;
    margin-right: 2%;
}


/*------------------------------------------------------------------------------------*/
/*--------------------------- FOOTER GLOBAL ------------------------------------------*/
/*------------------------------------------------------------------------------------*/

#chit-chat-footer-global {
    background-color: black;
    border-top: 2px solid white;
}

.chit-chat-footer-company,
.chit-chat-footer-copyright,
.chit-chat-footer-item a,
.chit-chat-footer-item-top a,
.chit-chat-footer-extra{
    color: white;
}

.chit-chat-footer-company {
    font-family: var(--chitchatFonts);
}

.chit-chat-footer-company,
.chit-chat-footer-copyright {
    text-align:left;
}


.chit-chat-footer-item,
.chit-chat-footer-item-top,
.chit-chat-footer-extra {
    font-size: 10px;
}

@media only screen and (max-width: 767px) {
    .chit-chat-footer-item,
    .chit-chat-footer-item-top {
        border-bottom: 1px solid white;
    }

    .chit-chat-footer-item-top {
        border-top: 1px solid white;
    }
}