/* =========================================================
   KCAL MEAL PLAN - SECTION 1
   ========================================================= */

.kcal-meal-plan-page {
    --kcal-green: #075640;
    --kcal-dark-green: #064c3b;
    --kcal-light-green: #e9f8f5;
    --kcal-border-green: #8edbd0;
    --kcal-text: #222222;
    --kcal-muted: #6b7775;
    --kcal-border: #e4e9e8;
    --kcal-bg: #ffffff;
    --kcal-soft-bg: #f5f7f7;

    width: 100%;
    box-sizing: border-box;
    color: var(--kcal-text);
    font-family: inherit;
}

.kcal-meal-plan-page *,
.kcal-meal-plan-page *::before,
.kcal-meal-plan-page *::after {
    box-sizing: border-box;
}

.kcal-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px 60px;
}

.kcal-meal-plan-image.product-main-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: #f4f8ef;
    border-radius: 18px;
}
.kcal-meal-plan-image.product-main-image
.product-main-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.kcal-meal-plan-image.product-main-image img,
#kcal-main-product-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
}

@media (max-width: 768px) {

    .kcal-meal-plan-image.product-main-image {
        height: 250px;
        border-radius: 14px;
    }

}
/* =========================================================
   PROGRESS
   ========================================================= */

.kcal-meal-plan-progress {
    width: 100%;
    max-width: 620px;
    margin: 0 auto 25px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.kcal-step {
    display: flex;
    align-items: center;
    gap: 7px;

    white-space: nowrap;
}

.kcal-step-number {
    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d7dddd;
    border-radius: 50%;

    background: #ffffff;
    color: #8b9593;

    font-size: 11px;
    font-weight: 600;
}

.kcal-step-label {
    color: #8a9492;
    font-size: 11px;
    font-weight: 500;
}

.kcal-step-active .kcal-step-number,
.kcal-step-complete .kcal-step-number {
    background: var(--kcal-green);
    border-color: var(--kcal-green);
    color: #ffffff;
}

.kcal-step-active .kcal-step-label,
.kcal-step-complete .kcal-step-label {
    color: var(--kcal-green);
    font-weight: 600;
}

.kcal-step-line {
    width: 70px;
    height: 1px;
    margin: 0 12px;

    background: #dfe5e3;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.kcal-meal-plan-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 14px;

    color: #7d8885;
    font-size: 16px;
    line-height: 1.5;
}

.kcal-meal-plan-breadcrumb a {
    color: #7d8885;
    text-decoration: none;
}

.kcal-meal-plan-breadcrumb a:hover {
    color: var(--kcal-green);
}


/* =========================================================
   HEADING
   ========================================================= */

.kcal-meal-plan-heading {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

a.back-arrow {
    color: #000 !important;
}

.kcal-meal-plan-heading h1 {
    margin: 0 0 7px;

    color: #1e2524;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.kcal-meal-plan-description {
    max-width: 680px;

    color: #272a2f;
    font-size: 16px;
    line-height: 1.55;
}

.kcal-meal-plan-description p {
    margin: 0;
}



/* =========================================================
   MAIN TWO COLUMN LAYOUT
   ========================================================= */

.kcal-meal-plan-section-1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 30px;
    align-items: start;
    margin-top: 30px;
}


.kcal-meal-plan-section-2 {
    background-color: #F2FBDE;
    padding: 50px 0px;
}

/* =========================================================
   LEFT SIDE
   ========================================================= */

.kcal-meal-plan-left {
    min-width: 0;
}

.kcal-meal-plan-image img{
    display: block;

    width: 100%;
    height: 355px;

    object-fit: cover;
    overflow: hidden;

    border-radius: 12px;
}


/* =========================================================
   MEAL INFO
   ========================================================= */

.kcal-meal-plan-info {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 12px;
    padding: 12px 14px;

    border-radius: 8px;
    background: #f5f7f7;
}

.kcal-meal-plan-info-row {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #272a2f;

    font-size: 16px;
    line-height: 1.4;
}

.kcal-meal-plan-info-row strong {
    color: var(--kcal-green);
    font-weight: 700;
}

.kcal-info-icon {
    font-size: 12px;
    line-height: 1;
}

.kcal-delivery-text {
    margin-top:15px;
    background-color: #F5F7F7;
    padding: 20px;
}
.kcal-delivery-text span {
    font-size: 16px;
}

/* =========================================================
   ADDITIONAL INFO ACCORDION
   ========================================================= */

.kcal-additional-info-section {
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #ddd;
}

.kcal-accordion-item {
    border-bottom: 1px solid #ddd;
}


/* TITLE */

.kcal-accordion-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 5px;

    background: transparent;
    border: 0;
    cursor: pointer;

    text-align: left;

    font-size: 18px;
    font-weight: 600;
    color: #222;

    transition: all 0.25s ease;
}

.kcal-accordion-title:hover {
    color: #1f4d3a;
}


/* ICON */

.kcal-accordion-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    font-weight: 400;

    transition: transform 0.3s ease;
}


/* CONTENT */

.kcal-accordion-content {
    max-height: 0;
    overflow: hidden;

    padding: 0 5px;

    opacity: 0;

    transition:
        max-height 0.35s ease,
        padding 0.35s ease,
        opacity 0.25s ease;
}


/* OPEN */

.kcal-accordion-item.active .kcal-accordion-content {
    max-height: 1000px;
    padding: 0 5px 22px;
    opacity: 1;
}


/* CHANGE + TO − */

.kcal-accordion-item.active .kcal-accordion-icon {
    transform: rotate(45deg);
}


/* WYSIWYG CONTENT */

.kcal-accordion-content p {
    margin: 0 0 12px;
    line-height: 1.7;
}

.kcal-accordion-content p:last-child {
    margin-bottom: 0;
}

.kcal-accordion-content ul,
.kcal-accordion-content ol {
    margin: 10px 0 15px 20px;
    padding: 0;
}

.kcal-accordion-content li {
    margin-bottom: 7px;
    line-height: 1.6;
}

.kcal-accordion-content strong {
    font-weight: 600;
}

button.kcal-accordion-title:hover, button.kcal-accordion-title:active, button.kcal-accordion-title:focus {
    background: transparent !important;
    border:none !important;
}

.kcal-accordion-title {
    font-size: 16px;
}

.kcal-accordion-content{
    font-size: 16px;
}


/* =========================================
   PRODUCT IMAGE GALLERY
========================================= */

.product-image-gallery {
    width: 100%;
}

/* Main image */

.product-main-image {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
}

.product-main-image-link {
    display: block;
    width: 100%;
}

.product-main-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* =========================================
   GALLERY THUMBNAILS
========================================= */

.product-gallery-section {
    width: 100%;
}

.product-gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-gallery-thumbnail {
    width: 100px;
    height: 100px;
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.product-gallery-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery-thumbnail:hover {
    border-color: #000;
}

.product-gallery-thumbnail.active {
    border: 2px solid #000;
}



/* =========================================================
   RIGHT SIDE
   ========================================================= */

.kcal-meal-plan-right {
    min-width: 0;
}

.kcal-plan-selection {
    margin-bottom: 20px;
}

.kcal-plan-selection h2 {
    margin: 0 0 5px;

    color: #202625;

    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
}

.kcal-selection-description {
    margin: 0 0 11px;

    color: #272a2f;

    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   CALORIE OPTIONS
   ========================================================= */

.kcal-calorie-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.kcal-occasion-options, .kcal-duration-options, .kcal-weekday-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

span.kcal-allergen-label, span.kcal-nutritionist-option-label {
    font-size: 14px;
}
.kcal-allergen-options .kcal-allergen-option {
    padding: 10px !important;
}

.kcal-calorie-option,
.kcal-yes-no-option,
.kcal-nutritionist-option,
.kcal-allergen-option,
.kcal-occasion-option,
.kcal-meal-option,
.kcal-duration-option,
.kcal-weekday-option {
    position: relative;
    padding: 10px 35px 10px 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #dfe7e5;
    border-radius: 8px;

    background: #f7f9f9;

    color: #222;

    text-align: left;
    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.kcal-calorie-option:hover,
.kcal-yes-no-option:hover, 
.kcal-nutritionist-option:hover,
.kcal-allergen-option:hover,
.kcal-occasion-option:hover,
.kcal-meal-option:hover,
.kcal-duration-option:hover,
.kcal-weekday-option:hover,
.kcal-calorie-option:focus,
.kcal-yes-no-option:focus, 
.kcal-nutritionist-option:focus,
.kcal-allergen-option:focus,
.kcal-occasion-option:focus,
.kcal-meal-option:focus,
.kcal-duration-option:focus,
.kcal-weekday-option:focus {
    border-color: var(--kcal-border-green);
    background: var(--kcal-light-green);
}

.kcal-calorie-option.is-selected, .kcal-yes-no-option.is-selected, .kcal-nutritionist-option.is-selected, .kcal-allergen-option.is-selected,.kcal-occasion-option.is-selected, .kcal-meal-option.is-selected, .kcal-duration-option.is-selected, .kcal-weekday-option.is-selected {
    border-color: var(--kcal-border-green);
    background: var(--kcal-light-green);

    box-shadow: inset 0 0 0 1px rgba(142, 219, 208, 0.15);
}

button.kcal-occasion-option {
    gap: 10px;
    padding: 10px;
}

.kcal-meal-options {
    display: flex;
    gap: 10px;
}
.kcal-meal-content {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.kcal-meal-title {
    font-size:14px;
}
.kcal-meal-calories, .kcal-meal-diet, .kcal-meal-cuisine {
    font-size: 12px;
    border-radius: 3px;
    background-color:#075640;
    color: #fff;
    padding: 3px 5px;
}

.kcal-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size:14px;
}

.kcal-option-title {
    display: block;

    color: #252b2a;

    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}

.kcal-option-subtitle {
    display: block;

    color: #272a2f;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
}

.kcal-option-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 2px;
    padding: 2px 6px;

    border-radius: 10px;

    background: var(--kcal-green);
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   RADIO
   ========================================================= */

.kcal-option-radio {
    position: absolute;
    top: 50%;
    right: 13px;

    width: 18px;
    height: 18px;

    border: 1px solid #aeb9b6;
    border-radius: 50%;

    background: #fff;

    transform: translateY(-50%);
    box-sizing: border-box;
}

/* Selected radio */
.kcal-calorie-option.is-selected .kcal-option-radio,
.kcal-days-option.is-selected .kcal-option-radio,
.kcal-weeks-option.is-selected .kcal-yes-no-option,
.kcal-nutritionist-option.is-selected .kcal-option-radio,
.kcal-allergen-option.is-selected .kcal-option-radio,
.kcal-occasion-option.is-selected .kcal-option-radio,
.kcal-meal-option.is-selected .kcal-option-radio,
.kcal-duration-option.is-selected .kcal-option-radio{
    border-color: var(--kcal-green);
    background-color: #fff;
}

/* Inner dot */
.kcal-calorie-option.is-selected .kcal-option-radio::after,
.kcal-days-option.is-selected .kcal-option-radio::after,
.kcal-weeks-option.is-selected .kcal-option-radio::after,
.kcal-yes-no-option.is-selected .kcal-option-radio::after,
.kcal-nutritionist-option.is-selected .kcal-option-radio::after,
.kcal-allergen-option.is-selected .kcal-option-radio::after,
.kcal-occasion-option.is-selected .kcal-option-radio::after,
.kcal-meal-option.is-selected .kcal-option-radio::after,
.kcal-duration-option.is-selected .kcal-option-radio::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: var(--kcal-green);

    transform: translate(-50%, -50%);
}

/* calculator modal section */

/* =====================================================
   CALCULATOR TRIGGER
===================================================== */

.kcal-calorie-calculator-section {
    margin: 30px 0;
}

.kcal-cal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-radius: 12px;
    background: #f7f7f7;
}

.kcal-cal b {
    font-size: 16px;
}

.kcal-open-calculator {
    border: 0;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}


/* =====================================================
   MODAL
===================================================== */

.kcal-calculator-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.kcal-calculator-modal.is-open {
    display: flex;
}


/* =====================================================
   OVERLAY
===================================================== */

.kcal-calculator-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}


/* =====================================================
   MODAL CONTENT
===================================================== */

.kcal-calculator-modal-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;
    max-height: 90vh;

    overflow-y: auto;

    background: #fff;
    border-radius: 16px;

    padding: 35px;
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.kcal-calculator-close {
    position: absolute;

    top: 12px;
    right: 15px;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}


/* =====================================================
   HEADER
===================================================== */

.kcal-calculator-modal-header {
    padding-right: 40px;
    margin-bottom: 25px;
}

.kcal-calculator-modal-header h2 {
    margin: 0 0 8px;
}

.kcal-calculator-modal-header p {
    margin: 0;
}


/* =====================================================
   PREVENT BODY SCROLL
===================================================== */

body.kcal-calculator-modal-open {
    overflow: hidden;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .kcal-cal {
        flex-direction: column;
        align-items: flex-start;
    }

    .kcal-open-calculator {
        width: 100%;
    }

    .kcal-calculator-modal {
        padding: 10px;
    }

    .kcal-calculator-modal-content {
        max-height: 95vh;
        padding: 25px 18px;
        border-radius: 12px;
    }

}


.kcal-calculator-modal-body h2 {
    display: none;
}


.kcal-occasion-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.kcal-option-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kcal-occasion-option.is-selected .kcal-option-checkbox, .kcal-weekday-option.is-selected .kcal-option-checkbox {
    background: #075640;
    border-color: #075640;
}

.kcal-occasion-option.is-selected .kcal-option-checkbox::after, .kcal-weekday-option.is-selected .kcal-option-checkbox::after{
    content: "✓";
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

/* =========================================
   FOOD PREFERENCE
========================================= */

.kcal-food-preference {
    margin-top: 22px;
    margin-bottom: 24px;
}

.kcal-food-preference h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
}

.kcal-food-preference .kcal-section-description {
    margin: 0 0 12px;
    font-size: 13px;
    color: #555;
}

.kcal-food-preference-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kcal-food-preference-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 145px;
    padding: 13px 16px;
    border: 1px solid #d8dfdf;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kcal-food-preference-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kcal-radio {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 1.5px solid #aeb8b7;
    border-radius: 50%;
    background: #fff;
    position: relative;
}

.kcal-food-preference-option:has(input[type="radio"]:checked) {
    border-color: #56c9c0;
    background: #eaf8f6;
}

.kcal-food-preference-option:has(input[type="radio"]:checked) .kcal-radio {
    border-color: #086b5d;
}

.kcal-food-preference-option:has(input[type="radio"]:checked) .kcal-radio::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #086b5d;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.kcal-preference-label {
    font-size: 14px;
    font-weight: 600;
    color: #17201f;
}

/*bottom section*/

.kcal-meal-plan-bottom-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #eefafa;
    border-top: 1px solid #1aaf8a;
    padding: 14px 20px;
}

.kcal-meal-plan-step {
    width: 100%;
}

.kcal-meal-step-1,
.kcal-meal-step-2 {
    width: 100%;
}

.kcal-step-complete {
    cursor: pointer;
}

.ast-container {
    display: block !important;
}
button.previous-step {
    background-color: transparent;
    padding: 0;
    margin-bottom: 20px;
}

/* =========================================================
   PRICE
   ========================================================= */

.kcal-meal-plan-price {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;

    margin-top: 18px;
    margin-bottom: 10px;

    color: #68736f;

    font-size: 16px;
    width: 600px;
    margin: 0 auto;
}

.kcal-weekly-price-row,
.kcal-total-price-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kcal-meal-plan-price strong {
    color: var(--kcal-green);

    font-size: 14px;
    font-weight: 700;
}

.kcal-meal-price-section {
    width: 30%;
}

/* =========================================================
   CONTINUE BUTTON
   ========================================================= */

.kcal-meal-plan-continue {
    width: 70%;
    min-height: 43px;
    border: 0;
    border-radius: 7px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.kcal-meal-plan-continue:hover {
    color: #ffffff;
}

.kcal-meal-plan-continue:active {
    transform: translateY(1px);
}


.kcal-meal-plan-step {
    width: 100%;
}

.kcal-meal-step-1,
.kcal-meal-step-2 {
    width: 100%;
}

.kcal-step-complete {
    cursor: pointer;
}

.ast-container {
    display: block !important;
}
button.previous-step {
    background-color: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.kcal-yes-no-options, .kcal-nutritionist-options, .kcal-nutritionist-fields {
    display: flex;
    gap: 10px;
}
.kcal-allergen-options, .kcal-nutritionist-details, .kcal-nutritionist-fields {
    margin-top: 20px;
}
.kcal-allergen-grid, .kcal-nutritionist-fields {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}
span.kcal-nutritionist-price {
    margin-left: 7px;
    background-color: green;
    padding: 3px 5px;
    font-size: 12px;
    color: #fff;
    border-radius: 15px;
}
.kcal-allergen-option[disabled] {
    cursor: not-allowed;
}