/*!
 * custom.css — Protein Fitness Meals
 * ---------------------------------------------------------------------------
 * Upload to:
 *   dashboard.proteinkwd.com / public / site / assets / css / custom.css
 *
 * This file loads on BOTH English and Arabic pages, and on every page of the
 * site. It's the place for small visual tweaks, so we don't have to keep
 * touching the template's own stylesheets or the layout file.
 *
 * (rtl.css is the Arabic-only companion to this file, and loads after it.)
 * ---------------------------------------------------------------------------
 */


/* ===========================================================================
   Sticky header — keep the blue top bar visible while scrolling
   ---------------------------------------------------------------------------
   The template already makes the header stick when you scroll: JavaScript adds
   a "sticky" class, and the stylesheet then pulls the whole header up by 62px
   so the blue bar (phone number, Login, language switcher) slides out of view
   and only the white menu row stays.

   Setting top back to 0 keeps the entire header on screen — blue bar included.

   Applies to English and Arabic equally: this rule doesn't care about language.
   =========================================================================== */

.header-wrap.sticky {
    top: 0 !important;
}


/* ===========================================================================
   "Download Our Application" bar — make it a thin strip on phones
   ---------------------------------------------------------------------------
   The bar is position:fixed at the bottom of every page. On a phone its two
   halves stack, so it grew to roughly 130px — about a fifth of the screen —
   and sat on top of whatever was underneath it.

   Below it becomes a single row about 46px tall, and the page gets matching
   bottom padding so nothing is ever hidden behind it.
   =========================================================================== */

@media (max-width: 991px) {

    #downloadBar {
        padding: 6px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    #downloadBar .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        flex-wrap: nowrap;
    }

    #downloadBar .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0;
        text-align: left;
    }

    #downloadBar .download-text {
        font-size: 12.5px;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* the arrow and the phone icon are decoration; on a narrow strip they are
       just noise competing with the two store badges */
    #downloadBar .download-text span:last-child,
    #downloadBar .foot-c {
        display: none;
    }

    #downloadBar .store-btn {
        height: 30px !important;
        width: auto !important;
    }

    #downloadBar .store-btn.me-2 {
        margin-right: 5px !important;
    }

    /* clear the fixed bar so it never covers a button */
    .page-wrapper {
        padding-bottom: 54px;
    }
}


/* ===========================================================================
   Hero buttons — a third, quieter style
   ---------------------------------------------------------------------------
   The homepage hero now carries three buttons, and three of equal weight is
   the one arrangement to avoid: nothing leads, so the eye has to choose and a
   hesitating visitor often chooses nothing.

   The template already provides two weights:
       .btn.style1   solid navy            -> Build Your Plan   (the main action)
       .btn.style8   outlined navy         -> Set Your Goal     (the free option)

   This adds the third:
       .btn.style-quiet   pale navy tint   -> View Our Menu     (browsing)

   The tint is your own navy at 6%, so no new colour enters the palette.
   Navy on it measures 9.48:1 against the 4.5:1 the accessibility standard
   asks for - comfortably readable in bright sunlight.

   Hover matches the other two: the template's sweep fills with #1D1E5B and
   .btn:hover turns the text white, so all three behave identically.
   =========================================================================== */

.btn.style-quiet {
    background-color: #F1F1F9;
    color: #2E3192;
    border: 1px solid transparent;
    border-radius: 5px;
}

.btn.style-quiet:after,
.btn.style-quiet:before {
    background: #1D1E5B;
}

/* ------------------------------------------------------------------------
   Point 6 - exactly one <h1> per page.

   Two tags changed in the markup, and these rules make both changes
   invisible. Every number below was measured in the browser on the live
   site, by putting the new tag in the same place and reading back its
   computed style - not guessed from the stylesheet.
   ------------------------------------------------------------------------ */

/* The page title in the breadcrumb strip is now an <h1>. As an <h2> it was
   40px, white, with 15px beneath it; a bare <h1> there came out black with
   8px, so colour and spacing are restored here. The five font sizes mirror
   the h2 breakpoints in responsive.css exactly, so the two are
   indistinguishable at every width. */
.breadcrumb-title h1{
    font-size:40px;
    font-weight:700;
    color:#fff;
    margin:0 0 15px;
}
@media only screen and (max-width:767px){
    .breadcrumb-title h1{font-size:24px;margin-bottom:10px}
}
@media only screen and (min-width:768px) and (max-width:991px){
    .breadcrumb-title h1{font-size:35px}
}
@media only screen and (min-width:992px) and (max-width:1199px){
    .breadcrumb-title h1{font-size:35px}
}
@media only screen and (min-width:1200px) and (max-width:1399px){
    .breadcrumb-title h1{font-size:40px}
}
@media only screen and (min-width:1600px){
    .breadcrumb-title h1{font-size:42px}
}

/* The login and signup pop-up titles are now <h2>. They measured 32px with
   10px beneath as <h1>; an <h2> in the same place came out 32px with 8px, so
   only the spacing needs restoring. Pinned rather than left to the cascade. */
#login-form .modal-heading{
    font-size:32px;
    margin:0 0 10px;
}

/* ------------------------------------------------------------------------
   "Set your goal" - the one green thing on the site.

   Green #00C389 is used for this single action and nothing else. Kept that
   way it comes to mean "the free 60-second thing"; spent on other buttons it
   stops meaning anything. The site is navy throughout, so a navy button in a
   navy menu was invisible - that is why this one is not navy.
   ------------------------------------------------------------------------ */

:root{ --goal-green:#00C389; --goal-green-dark:#00A876; --goal-ink:#052E22; }

/* The other menu items are tall links padded to the full height of the bar.
   The button is short, so its row has to centre it or it sits high. */
.navbar-nav .nav-item.goal-nav-item{
    display:flex;
    align-items:center;
}

.navbar-nav .nav-item .nav-link.goal-nav-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:var(--goal-green);
    color:var(--goal-ink) !important;
    font-size:15.5px;
    font-weight:800;
    line-height:1;
    padding:14px 22px !important;
    border-radius:100px;
    white-space:nowrap;
    box-shadow:0 8px 22px rgba(0,195,137,.38);
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.navbar-nav .nav-item .nav-link.goal-nav-btn:hover,
.navbar-nav .nav-item .nav-link.goal-nav-btn:focus{
    background:var(--goal-green-dark);
    color:var(--goal-ink) !important;
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(0,195,137,.46);
}
/* the theme underlines the active menu item; a button should not have one */
.navbar-nav .nav-item .nav-link.goal-nav-btn:before,
.navbar-nav .nav-item .nav-link.goal-nav-btn:after{display:none !important;}
.navbar-nav .nav-item .nav-link.goal-nav-btn.active{background:var(--goal-green-dark);}

.goal-nav-sec{font-weight:700;font-size:13.5px;opacity:.62;}

.goal-nav-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--goal-ink);
    animation:goalPulse 2.4s ease-out infinite;
}
@keyframes goalPulse{
    0%{box-shadow:0 0 0 0 rgba(5,46,34,.55)}
    70%{box-shadow:0 0 0 9px rgba(5,46,34,0)}
    100%{box-shadow:0 0 0 0 rgba(5,46,34,0)}
}
/* respect the visitor's own setting if they have asked for less movement */
@media (prefers-reduced-motion: reduce){
    .goal-nav-dot{animation:none}
    .navbar-nav .nav-item .nav-link.goal-nav-btn{transition:none}
}

@media only screen and (max-width:991px){
    /* the menu stacks here, so the row goes back to full width */
    .navbar-nav .nav-item.goal-nav-item{display:block;}
    .navbar-nav .nav-item .nav-link.goal-nav-btn{
        display:flex;
        justify-content:center;
        margin:10px 0;
        padding:15px 22px !important;
        font-size:16px;
    }
}

/* ---------- the two lines above the first question -------------------- */
.mg-intro{
    margin:0 0 20px;
    padding:16px 20px;
    background:rgba(0,195,137,.08);
    border-radius:10px;
}
[dir="ltr"] .mg-intro{border-right:0;border-left:4px solid var(--goal-green);}
[dir="rtl"] .mg-intro{border-left:0;border-right:4px solid var(--goal-green);}
.mg-intro-lead{
    margin:0;
    font-size:1rem;
    font-weight:700;
    line-height:1.55;
    color:#1B2340;
}
.mg-intro-sub{
    margin:4px 0 0;
    font-size:.88rem;
    line-height:1.5;
    color:#5B6478;
}

/* ---------- step 1 has to fit one phone screen ------------------------- */
/* Measured on a 390px viewport rather than guessed: before this block the
   Next button ended 632px down an 828px screen. The intro adds height, so
   the same amount is taken back out of padding above and around it. The
   test is that Next stays visible without scrolling. */
@media only screen and (max-width:767px){
    .content-wrapper.mg-page .pricing-section{padding-top:14px;}
    .mg-page .mg-intro{
        margin-bottom:14px;
        padding:12px 14px;
    }
    .mg-page .mg-intro-lead{font-size:.92rem;line-height:1.45;}
    .mg-page .mg-intro-sub{font-size:.8rem;margin-top:3px;}
    .mg-page .mg-top{margin-bottom:6px;}
    .mg-page .progress-steps{margin-bottom:14px;}
    .mg-page .step-card .section-title{margin-bottom:10px;}

    /* The space the intro needs is taken back from these two.

       These carry .content-wrapper as well as .mg-page on purpose. my-goal.css
       loads AFTER this file and already styles the same elements at the same
       strength, so a rule written as ".mg-page ..." here would lose the tie and
       do nothing. The extra class wins it outright, without !important. */
    .content-wrapper.mg-page .gender-card{padding:8px 8px 7px;}
    .content-wrapper.mg-page .gender-card img{height:48px;width:auto;margin-bottom:4px;}
    .content-wrapper.mg-page .date-picker,
    .content-wrapper.mg-page .date-picker .column{height:138px;}
}