/* =====================================
   Protein Help
   Bariboost Premium Experience
===================================== */

.bfa-protein-help {

    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;

}

.bfa-protein-help h2 {

    color: #4422aa;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 10px;

}

.bfa-protein-help p {

    line-height: 1.7;

}

/* =====================================
   Shared Card Styling
===================================== */

.bfa-protein-guidance,
.bfa-protein-logging,
.bfa-protein-pattern,
.bfa-protein-meals,
.bfa-protein-variety,
.bfa-most-logged-foods,
.bfa-protein-recipes,
.bfa-protein-learning,
.bfa-protein-relationships {

    background: #ffffff;

    border: 1px solid #ececec;

    border-radius: 18px;

    padding: 24px;

    margin-bottom: 22px;

    box-shadow:
        0 4px 20px rgba(68,34,170,.05);

}

.bfa-protein-guidance h3,
.bfa-protein-logging h3,
.bfa-protein-pattern h3,
.bfa-protein-meals h3,
.bfa-protein-variety h3,
.bfa-most-logged-foods h3,
.bfa-protein-recipes h3,
.bfa-protein-learning h3,
.bfa-protein-relationships h3 {

    margin-top: 0;

    margin-bottom: 16px;

    color: #4422aa;

    font-size: 1.3rem;

    font-weight: 700;

}

/* =====================================
   Hero Guidance Panel
===================================== */

.bfa-protein-guidance {

    background:
        linear-gradient(
            135deg,
            #4422aa,
            #5b35cc
        );

    color: #ffffff;

    border: none;

}

.bfa-protein-guidance h3 {

    color: #ffffff;

}

.bfa-protein-guidance p {

    color: rgba(
        255,
        255,
        255,
        .95
    );

}

/* =====================================
   Protein Logging
===================================== */

.bfa-protein-logging {

    border-left: 6px solid #4422aa;

}

.bfa-protein-logging p {

    margin-bottom: 18px;

}

/* =====================================
   Logging Pattern
===================================== */

.bfa-protein-pattern {

    border-left: 6px solid #88aa22;

    background: #f8faf5;

}

/* =====================================
   Meal Opportunities
===================================== */

.bfa-protein-meals {

    border-left: 6px solid #88aa22;

    background: #f8faf5;

}

/* =====================================
   Protein Variety
===================================== */

.bfa-protein-variety {

    border-left: 6px solid #4422aa;

}

.bfa-protein-variety ul {

    list-style: none;

    padding-left: 0;

}

.bfa-protein-variety li {

    display: inline-block;

    margin: 6px;

    padding: 8px 14px;

    background: #f3f0ff;

    color: #4422aa;

    border-radius: 30px;

    font-weight: 600;

}

/* =====================================
   Most Logged Foods
===================================== */

.bfa-most-logged-foods {

    border-left: 6px solid #4422aa;

}

.bfa-most-logged-foods ul {

    padding-left: 0;

    list-style: none;

}

.bfa-most-logged-foods li {

    padding: 10px 0;

    border-bottom: 1px solid #f2f2f2;

}

.bfa-most-logged-foods li:last-child {

    border-bottom: none;

}

/* =====================================
   Recipes
===================================== */

.bfa-protein-recipes {

    border-left: 6px solid #88aa22;

}

.bfa-protein-recipes ul {

    list-style: none;

    padding-left: 0;

}

.bfa-protein-recipes li {

    margin-bottom: 10px;

}

.bfa-protein-recipes a {

    display: block;

    padding: 12px 14px;

    border-radius: 10px;

    background: #f8faf5;

    text-decoration: none;

    color: #4422aa;

    transition: all .2s ease;

    font-weight: 600;

}

.bfa-protein-recipes a:hover {

    background: #88aa22;

    color: #ffffff;

}

/* =====================================
   Learning
===================================== */

.bfa-protein-learning {

    border-left: 6px solid #4422aa;

}

.bfa-protein-learning ul {

    list-style: none;

    padding-left: 0;

}

.bfa-protein-learning a {

    display: block;

    padding: 12px 14px;

    border-radius: 10px;

    background: #fafafa;

    text-decoration: none;

    color: #4422aa;

    margin-bottom: 10px;

    transition: all .2s ease;

    font-weight: 600;

}

.bfa-protein-learning a:hover {

    background: #f3f0ff;

}

/* =====================================
   Relationships
===================================== */

.bfa-protein-relationships {

    border-left: 6px solid #4422aa;

}

.bfa-protein-relationships ul {

    list-style: none;

    padding-left: 0;

}

.bfa-protein-relationships li {

    padding: 10px 14px;

    margin-bottom: 8px;

    background: #f3f0ff;

    border-radius: 10px;

    color: #4422aa;

    font-weight: 600;

}

/* =====================================
   Responsive
===================================== */

@media (max-width: 768px) {

    .bfa-protein-help {

        padding: 16px;

    }

    .bfa-protein-help h2 {

        font-size: 2rem;

    }

    .bfa-protein-guidance,
    .bfa-protein-logging,
    .bfa-protein-pattern,
    .bfa-protein-meals,
    .bfa-protein-variety,
    .bfa-most-logged-foods,
    .bfa-protein-recipes,
    .bfa-protein-learning,
    .bfa-protein-relationships {

        padding: 18px;

    }

}