/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.4
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.form-sec [type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled){padding: 14px 25px !important;color: #ffff;}
 body{font-family: 'Roboto', sans-serif;background-color:#F5F5F5;background-image: url(https://apexbloggers.com/designs/theproteinshop/wp-content/uploads/2026/03/body-bg-scaled.jpg);background-size: cover;background-position: center;background-repeat: repeat;overflow-x:clip;}
.form-sec{overflow: hidden;}
.form-sec .heading {text-align: center;display: flex;align-items: center;margin-bottom: 40px;justify-content: center;gap:26px}
.form-sec .heading span {width: 17px;height: 17px;border-radius:50%;background-color:#193DCD;display: block;position: relative;}
.form-sec .heading span::after{content: "";height: 1px;width: calc(100% + 50vw);border-bottom: 2px dashed #193DCD;position: absolute;left: 17px;top: 50%;}
.form-sec .heading h1{font-size: 50px;color: #141414;font-weight: 600;line-height: 58px;}
.form-sec .sub-heading{margin-bottom:40px;}
.form-sec .sub-heading h2{font-size: 36px;color: #141414;font-weight: 600;line-height: 42px;text-align: center;}
.form-sec .sub-heading h2 span{color: #193DCD;}
.form-sec .form-box{background-color: #fff;padding:10px;box-shadow: 0px 4px 171px 0px #0000001A;border-radius: 30px;}
.form-box .wrapper{padding: 60px 50px;border: 1px solid #193DCD;border-radius: 30px;}
.form-sec .form-box .form-control{border: 1px solid #14141447;height:70px;border-radius:15px;}
.form-sec .form-box input:focus{ outline: none !important;box-shadow: none !important;}
.form-sec .form-box .form-wrraper{position: relative;margin-bottom: 30px;}
.form-sec .form-box .form-wrraper label{font: 18px; font-weight: 400;color: #141414;line-height: 26px; position: absolute;
left:15px;top:50%;background:#fff;padding:0 6px;transition:0.3s;pointer-events:none;transform:translateY(-50%);}
.form-box .form-control:focus + label,
.form-box .form-control:not(:placeholder-shown) + label{top:-10px;}
.form-sec .btn-primary{background: #193DCD;padding: 14px 25px;text-align: center;display: flex;align-items: center;justify-content: center;width:100%;border-radius: 13px;gap: 10px;color: #fff;font-size: 18px;font-weight:400;position: relative;}
.form-sec .btn-primary::after{content: "";background-image: url(images/arrow-next-icon.svg);background-repeat: no-repeat;background-position: center;background-size: contain;width:16px;height: 16px;display: inline-block;}
.form-sec .form-box h3{font-size:23px;color: #141414;font-weight: 600;line-height: 28px;}
.form-sec .form-box .check-row{row-gap: 24px;}
.form-sec .form-box .check-row input{width:20px;height:20px;border: 1px solid #1414143D}
.form-sec .form-box .custom-check{display:flex;align-items:center;gap:10px;cursor:pointer;}
.form-sec .form-box .custom-check input{display:none;}
.form-sec .form-box .checkmark{width:20px;height:20px;background: #F0F0F0;border:1px solid #141414;position:relative;
transition:0.3s;}
.form-sec .form-box .custom-check input:checked + .checkmark{background:#193DCD;}
.form-sec .form-box .checkmark::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;}
.form-sec .form-box .custom-check input:checked + .checkmark::after{opacity:1;}
.form-sec .form-box textarea{margin-top: 40px;min-height:160px;}
.form-sec .form-box textarea:focus{ outline: none !important;box-shadow: none !important;}
.form-sec .form-box .date-box { display: flex; align-items: center; border: 1px solid #14141447;border-radius: 15px; overflow: hidden; width: 100%; padding: 7px 10px;margin-bottom: 25px;}
.form-sec .form-box  .date-label{background-color: #141414;color: #fff;padding:16px 26px;font-weight: 400;flex-shrink: 0;font-size: 18px; border-radius: 13px;}
.form-sec .form-box .date-value {border: none;padding: 10px 15px;flex-grow: 1;font-size: 16px;color: #141414;background-color:#fff;}
.form-sec .form-box .date-value:focus {outline: none;}
.form-sec .date{padding:40px 20px;;font-size:60px;color:#ffff;font-weight: 700;background-color: #141414;;border-radius: 11px;width: fit-content;margin-bottom: 40px;}
.form-sec .date sub{font-size:14px;}
.form-sec .date.active{background-color: #193DCD;}
.form-sec .calories-box{background-color:#FFFFFF;border: 1px solid #0000003B;border-radius:19px;padding: 30px 35px;height:100%}
.form-sec  ul {list-style: none;padding: 0;margin: 0;;}
.form-sec .calories-box h3{margin-bottom: 14px;}
.form-sec .calories-box ul li{background-color: #F7F7F7;border-radius: 10px;padding:14px 20px;width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;font-size: 18px;line-height:26px;color:#193DCD;font-weight: 600;}
.form-sec .calories-box ul li span{color: #141414;}
.form-sec .quantity-box{background-color: #FFFFFF;border: 1px solid #0000003B;padding: 22px;border-radius: 19px;margin-bottom: 40px;}
.form-sec .quantity-box .custom-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size: 18px;font-weight: 600;margin-bottom: 20px;}
.form-sec .quantity-box .custom-check input{display:none;}
.form-sec .quantity-box .checkmark{width:30px;height:30px;background: #F0F0F0;border:1px solid #1414143B;position:relative;transition:0.3s;border-radius: 10px;}
.form-sec .quantity-box .custom-check input:checked + .checkmark{background:transparent}
.form-sec .quantity-box .checkmark::after{content:"";position:absolute;left:10px;top:5px;width:8px;height:16px;border:solid #193DCD;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;}
.form-sec .quantity-box .custom-check input:checked + .checkmark::after{opacity:1;}
.form-sec  .quantity-box .wrapper{display: flex;align-items: center;justify-content: space-between;}
.form-sec  .quantity-box .wrapper .input-group span{font-size: 18px;font-weight:500;}
.form-sec  .quantity-box .wrapper .input-group button{width:30px;height:30px;background-color: #D9D9D954;display: flex;align-items: center;justify-content: center;border-radius: 10px;}
.form-sec  .quantity-box .wrapper .input-group {display: flex;align-items: center;gap:26px;}
.form-sec  .quantity-box .wrapper .input-group .main-box{display: flex;align-items: center;justify-content: space-between;max-width:170px;border: 1px solid #14141426;border-radius:15px !important;padding:5px;}
.form-sec  .quantity-box .wrapper .input-group .main-box input{border: none;text-align: center;width: 100%;font-size: 16px;color: #141414;background-color:#fff;}
.form-sec  .quantity-box  .price{font-size:22px;font-weight:600;color:#141414;}
.form-sec  .quantity-box  .price span{color: #193DCD;}
.form-sec .calories-box:last-child{margin-bottom: 0;}
.form-sec .col-lg-6 .quantity-box:last-child {margin-bottom: 0;}
.form-sec .details-row .btn-primary{width: fit-content;min-width:200px}
.form-sec .details-row{margin:40px 0}
.form-sec .day-heading{margin-bottom: 40px;}
.form-sec .big-image-box{width: 100%;background-color: #ffffff;border-radius:10px;padding: 10px;aspect-ratio: 16/16;margin-bottom: 20px;}
.form-sec .big-image-box img{width: 100%;object-fit: cover;border-radius: 10px;height: 100%;}
.form-sec .small-image-box{width: 100%;background-color: #ffffff;border-radius:10px;padding: 10px;aspect-ratio: 16/6;}
.form-sec .small-image-box img{width: 100%;object-fit: cover;border-radius: 10px;height: 100%;}
.form-sec .main-row .details-box{background-color: #ffffff;border-radius:10px;padding: 26px 36px;border: 1px solid #0000003B}
.form-sec .main-row .details-box .wrraper{border-bottom: 1px solid #14141440;padding-bottom: 10px;margin-bottom:10px;}
.form-sec .main-row .details-box .wrraper h3{margin-bottom: 10px;}
.form-sec .main-row .details-box .wrraper p{font-size:14px}
.form-sec .pro-quant{display: flex;align-items: center;}
.form-sec .number{display: flex;justify-content: space-between;width:50%;padding-right:20px;border-right: 1px solid #0000003B;}
.form-sec .number{font-size: 18px;font-weight: 600;color: #141414;}
.form-sec .number span{color: #193DCD;}
.tofu{display: flex;align-items: center;justify-content: space-between;padding-left: 20px;width:50%;font-size: 18px;font-weight: 600;color: #141414;}
.tofu .price{font-size:30px;font-weight:600;line-height:38px;}
.tofu .price span{color: #193DCD;}
.form-sec .ingredients-box{background-color: #FFFFFF;border: 1px solid #0000003B;border-radius:19px;padding:26px 36px;margin: 25px 0px 40px 0;}

.e-con > .elementor-widget{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ============================================================
   Alpine.js x-cloak — hide until Alpine initialises
============================================================ */
[x-cloak] { display: none !important; }

/* ============================================================
   Step navigation — Back button
============================================================ */
.tps-back-btn {
    background: transparent;
    border: 1px solid #193DCD;
    color: #193DCD;
    padding: 14px 25px;
    border-radius: 13px;
    font-size: 18px;
    font-weight: 400;
    flex: 0 0 auto;
}
.tps-back-btn:hover { background: #193DCD; color: #fff; }

/* ============================================================
   Error messages
============================================================ */
.tps-error-msg {
    background: #fff0f0;
    border: 1px solid #e00;
    color: #c00;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 15px;
}

/* ============================================================
   Loading spinner (used inside Next / Place Order buttons)
============================================================ */
.tps-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tps-spin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes tps-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Disabled quantity wrapper (when item unchecked)
============================================================ */
.tps-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ============================================================
   Step 5 grand total box
============================================================ */
.tps-grand-total-box {
    font-size: 20px;
    color: #193DCD;
    text-align: right;
    margin-top: 0;
}
.tps-grand-total-box span { font-weight: 700; }

/* ============================================================
   Step 7 — Success screen
============================================================ */
.tps-success-box {
    background: #fff;
    border-radius: 30px;
    padding: 60px 40px;
    box-shadow: 0px 4px 171px 0px #0000001A;
    margin: 40px 0;
}
.tps-success-icon {
    width: 80px;
    height: 80px;
    background: #193DCD;
    color: #fff;
    font-size: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
}
.tps-success-box h2 {
    font-size: 36px;
    font-weight: 700;
    color: #141414;
    margin-bottom: 16px;
}
.tps-success-box p {
    font-size: 17px;
    color: #555;
    line-height: 1.6;
}

/* ============================================================
   Step 6 top heading
============================================================ */
.top-heading { margin-bottom: 30px; }
.top-heading h2 { font-size: 32px; font-weight: 700; color: #141414; margin-bottom: 10px; }
.top-heading p  { font-size: 16px; color: #555; }
.form-sec .ingredients-box ul li{display: flex;padding: 10px 0;border-bottom: 1px solid #14141440;}
.form-sec .ingredients-box ul li:last-child{border-bottom: none;;}
.form-sec .ingredients-box ul li:last-child .number{border-right:0;width:100%}
.form-sec .ingredients-box ul li .number:nth-child(2){border-right:0;padding-left: 20px;}
.top-heading{margin-bottom: 40px;}
.top-heading p{font-size:16px}
.run-heading{margin-bottom: 30px;}
.form-sec{padding: 200px 0 60px 0}
.page-header .entry-title{display:none;}






@media (max-width: 1199px) {
.form-sec .sub-heading h2 {font-size: 30px;line-height: 36px;}
.form-sec .sub-heading {margin-bottom: 30px;}
.form-sec .form-box .form-control {height: 60px;}
.form-sec .btn-primary {padding: 10px 25px;}
.form-box .wrapper {padding: 50px 40px;}
.form-sec .heading h1{font-size: 38px;color: #141414;font-weight: 600;line-height: 46px;}
.form-sec .heading{margin-bottom: 30px;}
.form-sec .day-heading {margin-bottom: 30px;}
.form-sec .date {font-size: 50px;line-height:58px;}
.form-sec .calories-box ul li{font-size: 16px;line-height: 24px;}
.top-heading { margin-bottom: 30px;}
.form-sec{padding: 100px 0 50px 0}



}

@media (max-width: 1024px) {

	.elementor-331 .elementor-element.elementor-element-dec9fd1:not(.elementor-motion-effects-element-type-background){display: none;}
}

@media (max-width: 991px) {
.form-sec .form-box .form-wrraper {margin-bottom: 20px;}
.form-sec .form-box .form-control {height:40px;}
.form-sec .form-box h3 {font-size: 20px;}
.form-sec .form-box .check-row {row-gap: 20px;}
.form-sec .form-box .form-wrraper label{font-size: 16px;}
.form-sec .form-box .custom-check{font-size: 16px;}
.form-sec .details-row {row-gap: 30px;margin: 0;}
.form-sec .quantity-box {margin-bottom:30px;}
.form-sec .date {font-size: 40px;line-height: 48px;}
.form-sec .date{margin-bottom: 30px;font-size: 34px;}
.form-sec .col-lg-6 .quantity-box:last-child {margin-bottom: 30px;}
.form-sec .quantity-box .wrapper .input-group span {font-size: 16px;}
.form-sec .small-image-box{margin-bottom: 30px;}
.run-heading{margin-bottom:20px;}
.main-row .date{margin-bottom: 30px;}
.form-sec .main-row .details-box .wrraper {padding-bottom: 5px;margin-bottom: 5px;}
.tofu .price {font-size: 24px;line-height: 30px;}
.form-sec .main-row .details-box {padding: 20px 30px;}
.form-sec .number {font-size: 16px;}
.form-sec{padding: 40px 0;}
.form-sec .form-box .date-label {padding: 8px 16px;font-size: 14px;}







}


@media (max-width: 767px) {
.form-sec .sub-heading h2 {font-size: 24px;line-height: 32px;}
.form-sec .form-box .form-control {height: 50px;}
.form-sec .btn-primary{font-size:14px;}
.form-sec .form-box .date-label {padding: 10px 20px;font-size: 16px;}
.form-sec .heading h1{font-size: 30px;color: #141414;font-weight: 600;line-height: 40px;}
.form-box .wrapper {padding: 40px 30px;}
.form-sec .form-box .checkmark {width: 18px;height: 18px;}
.form-sec .heading{margin-bottom: 20px;}
.form-sec .quantity-box .custom-check{font-size: 16px;}
.form-sec{padding: 35px 0;}
.form-sec [type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled){padding: 10px 20px !important;font-family: 12px;}





}


@media (max-width: 575px) {

.form-sec .form-box .form-wrraper label{font-size: 14px;}
.form-sec .form-box .custom-check{font-size: 14px;}
.top-heading p{font-size: 14px;}
.form-sec .date {font-size: 28px;line-height: 36px;}



}


@media (max-width: 480px) {
    .form-sec .form-box .date-label {
        padding: 8px 16px;
        font-size: 12px;
    }

.form-sec .form-box {box-shadow: 0px 4px 50px 0px #0000001A;}


}





@media (max-width: 375px) {

}

/* ============================================================
   Step 4 — per-unit price hint
============================================================ */
.tps-unit-price {
    display: block;
    font-size: 12px;
    color: #888;
    font-weight: 400;
    margin-top: 3px;
    line-height: 1.3;
}