/*******************************************************************************************
    Mobile Css Settings
/********************************************************************************************/


/******************************************************************************************
*******************************************************************************************
    992 - 
*******************************************************************************************
/******************************************************************************************/
@media (min-width: 992px) and (max-width: 1270px) {

    /*html, body {
        overflow-x: hidden;
    }*/

    .page-width {
        max-width: 98%;
    }

    .navbar-menu {
        margin-left: 0px !important;
    }

    .navbar-collapse .nav-link {
        font-size: 1.8rem !important; /* or whatever size you want */
    }
}

/******************************************************************************************
*******************************************************************************************
    768 - 991
*******************************************************************************************
/******************************************************************************************/
@media (min-width: 768px) and (max-width: 991px) {

    html, body {
    overflow-x: hidden;
    }
    .page-width {
        max-width: 98%;
    }

    /*TESTING*/
    /*body::before {
        content: "✅ MEDIA QUERY IS ACTIVE";
        display: block;
        color: red;
        font-size: 1.2rem;
        text-align: center;
        background: yellow;
    }*/

    .navbar-menu {
        margin-left: 0px !important;
    }

    .navbar-collapse .nav-link {
        font-size: 1.5rem !important; 
    }

    /********************************************************************************************/
    /*Home page*/
    .hero-text {
        font-size: 60px;
    }

    /********************************************************************************************/
    /* Semi-Custom Cake Request 768 - 991 */
    /********************************************************************************************/
    .sc-img-card {
        max-width: 360px;
        max-height: 360px;
    }

    .sc-details-img {
        max-width: 334px;
        max-height: 334px;
    }

    /********************************************************************************************/
    /*Product Details 768 - 991   */
    /********************************************************************************************/
    .product-details-page-width {
        width: 98%;
    }

    .product-details-title {
        font-size: 26px;
    }

    .product-details-img {
        max-width: 270px;
        max-height: 270px;
    }

    .order-img-card {
        max-height: 290px;
        max-width: 290px;
    }

    /*.details-header {
        
    }*/

    .order-instructions {
        font-size: 18px;
    }
}


/******************************************************************************************
*******************************************************************************************
    481 - 768 (Collapsed due to navbar-expand-md)
*******************************************************************************************
/******************************************************************************************/
    @media (min-width: 481px) and (max-width: 767px) {
        /* Your styles here */
        html, body {
            overflow-x: hidden;
        }

        .page-width {
            max-width: 98%;
        }

        .navbar-collapse.show .navbar-nav .nav-item:first-child {
            margin-top: 0.5rem; /* or try padding-top */
        }

        .navbar-collapse .nav-link {
            font-size: 1.5rem !important;
        }

        .navbar-menu {
            margin-left: 0px !important;
        }

        

        /********************************************************************************************/
        /*Home page*/
        .hero-text {
            font-size: 42px;
        }

        /********************************************************************************************/
        /*Order page*/
        /********************************************************************************************/
        .order-categories-ui {
            margin-left: 0px;
        }

        .active-items-container {
            max-width: 98%;
        }

        /********************************************************************************************/
        /* Semi-Custom Cake Request 481 - 768 */
        /********************************************************************************************/
        .sc-img-card {
            max-width: 440px;
            max-height: 440px;
        }

        .sc-details-img {
            max-width: 420px;
            max-height: 420px;
        }

        /********************************************************************************************/

        /********************************************************************************************/
        /*Product Details 481 - 768   */
        /********************************************************************************************/
        .product-details-page-width {
            width: 98%;
        }

        .product-details-title {
            font-size: 26px;
        }

        .product-details-img {
            max-width: 270px;
            max-height: 270px;
        }

        .order-img-card {
            max-height: 290px;
            max-width: 290px;
        }

        /*.details-header {
            max-width: 290px;
        }*/

        .order-instructions {
            font-size: 18px;
        }

        /*Register & Login*/
        .register-margin {
            margin-left: 0px;
        }
        /********************************************************************************************/
        /*Meal Details*/
        .order-instructions {
            font-size: 18px;
        }

        /*Order details Component*/
        .order-details-page-width {
            max-width: 90%;
        }
        /********************************************************************************************/
        /* Checkout Payment   481 - 768            */
        /********************************************************************************************/
        .checkout-header {
            font-size: 20px;
        }

        /*Footer*/
        .footer {
            line-height: 25px !important;
        }

        .center-mc {
            justify-content: start;
        }
    }

/******************************************************************************************
*******************************************************************************************
    401 - 480
*******************************************************************************************
/******************************************************************************************/
@media (min-width:401px) and (max-width: 480px) {
    /* Styles specifically for most smartphones */
    html, body {
        overflow-x: hidden;
    }

    .page-width {
        max-width: 98%;
    }

    .navbar-nav {
        align-items: flex-start !important;
    }

    .navbar-menu {
        margin-left: 0px !important;
    }

    .navbar-collapse .nav-link {
        font-size: 1.5rem !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .navbar-menu {
        margin-left: 0px !important;
    }

    .not-found-mascot {
        width: 140px;
        height: 140px;
    }

    .not-found-text {
        font-family: GreatVibes;
        font-size: 34px;
        color: #8F8F8F;
    }

    /********************************************************************************************/
    /*Home page   401 - 480 */
    .hero-text {
        font-size: 42px;
    }

    /********************************************************************************************/
    /*Order page*/
    /********************************************************************************************/
    .order-categories-ui {
        margin-left: 0px;
    }

    .active-items-container {
        max-width: 98%;
    }

    .active-item {
        text-align: center;
        cursor: pointer;
        /*max-width: 312px;*/
        max-width: 290px;
        padding: 10px;
        font-size: 16px;
        /*text-align: center;*/
        /*margin-right: 45px;*/
        /*margin-left:20px;*/
        margin-bottom: 20px;
        /*background-color:#F7F7F7;*/
        border-radius: 5px 5px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        /*transition: .2s;*/
    }

    .active-item-img {
        /*width:290px;
        height:290px;*/
        width: 270px;
        height: 270px;
        border-bottom: 1px solid lightgrey;
    }

    /********************************************************************************************/
    /* Semi-Custom Cake Request 401 - 480 */ 
    /********************************************************************************************/
    .sc-page-header {
        font-size: 38px;
    }

    .sc-details-title {
        font-size: 34px;
    }

    .sc-img-card {
        max-width: 320px;
        max-height: 320px;
    }

    .sc-details-img {
        max-width: 300px;
        max-height: 300px;
    }

    .sc-desc {
    }

    .mobile-button {
        width: 100%;
    }

    /********************************************************************************************/
    /*Product Details (min-width:401px) and (max-width: 480px)    */
    /********************************************************************************************/
    .product-details-page-width {
    }

    .product-details-title {
        font-size: 26px;
    }

    .product-details-img {
        max-width: 270px;
        max-height: 270px;
    }

    .order-img-card {
        max-height: 290px;
        max-width: 290px;
    }

    .details-header {
        max-width: 290px;
    }

    .order-instructions {
        font-size: 18px;
    }

    /********************************************************************************************/
    /*Register & Login*/
    .register-margin {
        margin-left: 0px;
    }
    /********************************************************************************************/
    /*Product Details*/
    .order-instructions {
        font-size: 18px;
    }


    /********************************************************************************************/
    /* Checkout Payment   401 - 480            */
    /********************************************************************************************/
    .checkout-header {
        font-size: 20px;
    }

    /********************************************************************************************/
    /* Error / Success Pages   401 - 480           */
    /********************************************************************************************/
    .error-header {
        font-size: 34px
    }

    /*Footer*/
    .footer {
        line-height: 25px !important;
    }

    .center-mc {
        justify-content: start;
    }
}

    /******************************************************************************************
*******************************************************************************************
    0 - 400
*******************************************************************************************
/******************************************************************************************/
@media (min-width:0px) and (max-width: 400px) {
    /* Styles specifically for most smartphones */
    /* Styles specifically for most smartphones */
    html, body {
        overflow-x: hidden;
    }

    .page-width {
        max-width: 98%;
    }

    .navbar-nav {
        align-items: flex-start !important;
    }

    .navbar-menu {
        margin-left: 0px !important;
    }

    .navbar-collapse .nav-link {
        font-size: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .not-found-mascot {
        width: 140px;
        height: 140px;
    }

    .not-found-text {
        font-family: GreatVibes;
        font-size: 34px;
        color: #8F8F8F;
    }

    .mobile-full-width {
        display: block;
        width: 100%;
    }

    /********************************************************************************************/
    /* Home page   0 - 400 */
    .hero-text {
        font-size: 42px;
    }

    /********************************************************************************************/
    /* About Us - Our Flavors & Fillings */
    /********************************************************************************************/
    .our-flavors-container {
        padding:10px;
    }

    .flav-intro-header {
        font-size: 38px;
    }

    .flav-desc-cat-header {
        display: block;
        font-size: 28px;
        padding:4px;
        width: 100%;
    }

    .upgraded-flavors strong {
        display: block; /* line 1: Upgraded Flavors: */
        margin-bottom: .25rem;
    }

    .upgraded-flavors span {
        display: inline-block; /* line 2: both items inline */
        margin-left: 0 !important; /* override ms-1/ms-3 */
    }

    .upgraded-flavors span + span {
        margin-left: 1rem !important; /* spacing between * and ** items */
    }

    .flav-desc-text {
    }

    .flav-pairing-text {
        font-size: 14px;
    }

    .flav-badge-size {
        font-size: 10px;
    }

    /*Filling*/
    .gx-mobile-0 {
        --bs-gutter-x: 0;
    }

    /* Cake Sizes */
    .size-subheader {
        font-size: 32px;
    }

    .size-custom-text {
        font-size: 16px;
    }

    /********************************************************************************************/
    /*Order page*/
    /********************************************************************************************/
    .order-categories-ui {
        margin-left: 0px;
    }

    .active-items-container {
        max-width: 98%;
    }

    .active-item {
        text-align: center;
        cursor: pointer;
        /*max-width: 312px;*/
        max-width: 290px;
        padding: 10px;
        font-size: 16px;
        /*text-align: center;*/
        /*margin-right: 45px;*/
        /*margin-left:20px;*/
        margin-bottom: 20px;
        /*background-color:#F7F7F7;*/
        border-radius: 5px 5px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        /*transition: .2s;*/
    }

    .active-item-img {
        /*width:290px;    height:290px;*/
        width: 270px;
        height: 270px;
        border-bottom: 1px solid lightgrey;
    }

    /********************************************************************************************/
    /*Gallery Items*/
    .gallery-index-header {
        font-size: 34px;
    }

    /*.gallery-container {
        width: 100%;
    }*/

    .gallery-container .d-flex {
        justify-content: center !important; /* Center the items inside the flex container */
    }

    .gallery-item {
        cursor: pointer;
        max-width: 210px;
        height: 248px;
        padding: 8px;
        text-align: center;
        margin-bottom: 20px;
    }

    .gallery-item-img {
        width: 180px;
        height: 180px;
    }

    .gallery-img-item-title {
        font-size: 34px;
    }

    /********************************************************************************************/
    /* Semi-Custom Cake Request */
    /********************************************************************************************/
    .sc-page-header {
        font-size: 38px;
    }

    .sc-details-title {
        font-size: 34px;
    }

    .sc-img-card {
        max-width: 320px;
        max-height: 320px;
    }

    .sc-details-img {
        max-width: 300px;
        max-height: 300px;
    }

    .sc-desc {

    }

    .mobile-button {
        width: 100%;
    }


     
    /********************************************************************************************/
    /*Quick Cart*/
    /*.quick-cart-item-img {
        width: 60px;
        height: 60px;
    }*/
    /********************************************************************************************/
    /*Register & Login*/
    .register-margin {
        margin-left: 0px;
    }

    /********************************************************************************************/
    /*Product Details   0 - 400 */
    /********************************************************************************************/
    .product-details-page-width {
        width: 98%;
    }

    .product-details-title {
        font-size: 26px;
    }

    .product-details-img {
        max-width: 270px;
        max-height: 270px;
    }

    .order-img-card {
        max-height: 290px;
        max-width: 290px;
    }

    .details-header {
        max-width: 290px;
    }

    .order-instructions {
        font-size: 18px;
    }

    .add-to-cart {
        text-align: left;
    }

    .vegan-gluten-badge {
        font-size: 13px;
    }

    .admin-main-categories {
        float: none;
        width: 100%;
    }

    .product-add-btn {
        float:none;
        margin-left:0px;
    }

    .shortlist-categories {
        float: none;
        width: 100%;
    }

    /* Manage Paid Orders */
    .verify {
        max-width:320px;
    }
    /********************************************************************************************/
    /* Google reCaptcha*/
    /********************************************************************************************/
    .grecaptcha-badge {
        transform: scale(.9) !important; /* adjust to stay above your footer */
    }

    /********************************************************************************************/
    /* Admin Section 0 - 400 */
    /********************************************************************************************/

    .admin-card-container {
        justify-content: center;
    }

    .gallery-card-container {
        justify-content: center;
    }

    /********************************************************************************************/
    /* Admin Forms */
    /********************************************************************************************/
    
    /* Products Admin */
    .add-btns-float-left {
        float:none;
    }

    .prod-admin-add-btn {
        display:block;
        width:100%;
        margin-top:5px;
        margin-right:0px;
    }

    /*Order form config*/
    .sc-order-form-title {
        font-size: 28px;
    }

    /* Cake Config Form */
    .cake-config-form-width {
        width: 335px;
    }
    /********************************************************************************************/
    /* Checkout Payment   0 - 400            */
    /********************************************************************************************/
    .checkout-header {
        font-size: 20px;
    }

    /*Footer*/
    .footer {
        line-height: 25px !important;
    }

    .center-mc {
        justify-content: start;
    }

    /********************************************************************************************/
    /* Error / Success Pages   0 - 400            */
    /********************************************************************************************/
    .error-header{
        font-size:34px
    }

    #icingColorOptions .picker-pill {
        grid-template-columns: 40% auto; /* first column = 20%, second = only as wide as needed */
        
    }

}