/* ═══════════════════════════════════════════════════════════════════════════
   CALORIE CALCULATOR — Input Section
   ═══════════════════════════════════════════════════════════════════════════ */
.calorie__area {
    padding-top: 200px;
    padding-bottom: 150px;
    position: relative;
    background-color: hsl(var(--section-bg));
    z-index: 1;
}

@media (max-width: 1199px) {
    .calorie__area {
        padding-top: 160px;
        padding-bottom: 100px;
    }
}

@media (max-width: 991px) {
    .calorie__area {
        padding-top: 130px;
        padding-bottom: 70px;
    }
}

/* ── Left: Intro ── */
.calorie__intro {
    padding-inline-end: 16px;
}

@media (max-width: 991px) {
    .calorie__intro {
        padding-inline-end: 0;
        text-align: center;
        margin-bottom: 8px;
    }
}

.calorie__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: hsl(var(--base) / 0.1);
    color: hsl(var(--base));
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.calorie__title {
    font-family: var(--heading-font);
    font-size: 32px;
    font-weight: 700;
    color: hsl(var(--heading-color));
    margin-bottom: 12px;
    text-transform: uppercase;
    line-height: 1.2;
}

@media (max-width: 1199px) {
    .calorie__title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .calorie__title {
        font-size: 24px;
    }
}

.calorie__desc {
    font-size: 15px;
    color: hsl(var(--body-color));
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Benefits */
.calorie__benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 991px) {
    .calorie__benefits {
        max-width: 380px;
        margin-inline: auto;
        text-align: start;
    }
}

.calorie__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.calorie__benefit-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--white));
    font-size: 15px;
}

.calorie__benefits li strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: hsl(var(--heading-color));
    margin-bottom: 1px;
}

.calorie__benefits li>div>span {
    font-size: 12px;
    color: hsl(var(--body-color));
}

/* ── Right: Card ── */
.calorie__card {
    background-color: hsl(var(--white));
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 6px 24px hsl(var(--black) / 0.06);
}

@media (max-width: 575px) {
    .calorie__card {
        padding: 18px 14px;
    }
}

.calorie__card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid hsl(var(--black) / 0.06);
}

.calorie__card-header i {
    color: hsl(var(--base));
    font-size: 18px;
}

.calorie__card-header h5 {
    font-family: var(--heading-font);
    font-size: 18px;
    margin: 0;
    text-transform: uppercase;
    color: hsl(var(--heading-color));
}

/* Labels */
.calorie__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: hsl(var(--heading-color));
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Styled Radio Buttons ── */
.calorie__radio-group {
    display: flex;
    gap: 8px;
}

.calorie__radio {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.calorie__radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.calorie__radio span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 2px solid hsl(var(--black) / 0.08);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--body-color));
    background-color: transparent;
    transition: all 0.2s ease;
    text-align: center;
}

.calorie__radio span i {
    font-size: 14px;
}

.calorie__radio:hover span {
    border-color: hsl(var(--base) / 0.3);
}

.calorie__radio.active span {
    border-color: hsl(var(--base));
    background-color: hsl(var(--base) / 0.08);
    color: hsl(var(--base));
    box-shadow: 0 0 0 3px hsl(var(--base) / 0.08);
}

.calorie__radio.active span i {
    color: hsl(var(--base));
}

/* Compact Inputs */
.calorie__area .form-control,
.calorie__area .form-select {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1.5px solid hsl(var(--black) / 0.08);
    font-size: 14px;
    background-color: transparent;
    transition: border-color 0.2s ease;
    height: auto;
    min-height: 42px;
    line-height: 1.4;
}

.calorie__area .form-select {
    padding-inline-end: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.calorie__area .form-control:focus,
.calorie__area .form-select:focus {
    border-color: hsl(var(--base));
    box-shadow: 0 0 0 2px hsl(var(--base) / 0.08);
}

.calorie__area .input-group-text {
    background-color: hsl(var(--base) / 0.06);
    border: 1.5px solid hsl(var(--black) / 0.08);
    border-radius: 0 8px 8px 0;
    color: hsl(var(--base));
    font-weight: 600;
    font-size: 12px;
    padding: 8px 10px;
}

[dir="rtl"] .calorie__area .input-group-text {
    border-radius: 8px 0 0 8px;
}

/* ── Consultation CTA ── */
.calorie__consult {
    margin-top: 32px;
}

@media (max-width: 991px) {
    .calorie__consult {
        text-align: center;
    }
}

.calorie__consult-title {
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 700;
    color: hsl(var(--heading-color));
    text-transform: uppercase;
    margin-bottom: 10px;
}

.calorie__consult .btn i {
    margin-inline-end: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CALORIE RESULTS — Two-Column Layout
   ═══════════════════════════════════════════════════════════════════════════ */
.calorie-results__area {
    background-color: hsl(var(--section-bg));
    position: relative;
}

/* ── Left Column: Summary Card ── */
.cr__summary-card {
    background-color: hsl(var(--white));
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 8px 30px hsl(var(--black) / 0.06);
    position: sticky;
    top: 100px;
}

/* ── Calorie Hero ── */
.cr__calorie-hero {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid hsl(var(--black) / 0.06);
    margin-bottom: 24px;
}

.cr__calorie-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--base)) 0%, hsl(var(--base-d-200)) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 6px 24px hsl(var(--base) / 0.35);
    animation: crIconPulse 2.5s ease-in-out infinite;
}

@keyframes crIconPulse {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.cr__calorie-icon i {
    font-size: 22px;
    color: hsl(var(--white));
}

.cr__calorie-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: hsl(var(--body-color));
    margin-bottom: 4px;
}

.cr__calorie-number {
    font-size: 64px;
    font-weight: 900;
    font-family: var(--heading-font);
    color: hsl(var(--heading-color));
    line-height: 1;
}

@media (max-width: 991px) {
    .cr__calorie-number {
        font-size: 52px;
    }

    .cr__summary-card {
        position: static;
    }
}

.cr__calorie-unit {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: hsl(var(--body-color));
    margin-top: 2px;
}

.cr__goal-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background-color: hsl(var(--base) / 0.1);
    color: hsl(var(--base));
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}

/* ── Macros Progress Bars ── */
.cr__macros {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cr__macro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.cr__macro-name {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--heading-color));
}

.cr__macro-name i {
    margin-inline-end: 4px;
    font-size: 12px;
    color: hsl(var(--base));
}

.cr__macro-value {
    font-size: 14px;
    font-weight: 700;
    color: hsl(var(--heading-color));
}

.cr__macro-value small {
    font-size: 11px;
    font-weight: 600;
    color: hsl(var(--body-color));
    margin-inline-start: 4px;
}

.cr__progress {
    width: 100%;
    height: 10px;
    border-radius: 6px;
    background-color: hsl(var(--black) / 0.06);
    overflow: hidden;
}

.cr__progress-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.cr__progress--protein {
    background: linear-gradient(90deg, hsl(var(--base)), hsl(var(--base-d-100)));
}

.cr__progress--carbs {
    background: linear-gradient(90deg, hsl(var(--warning)), hsl(40, 95%, 48%));
}

.cr__progress--fats {
    background: linear-gradient(90deg, hsl(var(--green)), hsl(140, 55%, 38%));
}

/* ── Right Column: Programs Header ── */
.cr__programs-header {
    margin-bottom: 24px;
}

.cr__programs-header h3 {
    font-family: var(--heading-font);
    text-transform: uppercase;
    font-size: 22px;
    color: hsl(var(--heading-color));
    margin-bottom: 4px;
}

.cr__programs-header p {
    font-size: 14px;
    color: hsl(var(--body-color));
    margin: 0;
}

/* ── Program Filter Tabs (inside results) ── */
#calorieProgramTabs {
    margin-bottom: 28px;
}

#calorieProgramTabs a {
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cr-tab-badge {
    display: inline-block;
    background-color: hsl(var(--base));
    color: hsl(var(--white));
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 50px;
    margin-inline-start: 6px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}