/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

/* CSS Custom Properties for Theme Management */
:root {
  /* Light Theme Variables */
  --background-color: #ffffff;
  --secondary-background-color: #f8f9fa;
  --text-color: #333333;
  --accent-color: #6c757d;
  --border-color: #dee2e6;
  --site-color: #EC7E4A;
  --site-color-hover: #d66a3a;
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --text-shadow: none;
  
  /* Card-specific variables */
  --card-bg: var(--secondary-background-color);
  --card-bg-color: var(--secondary-background-color);
  --card-border: rgba(45, 167, 113, 0.1);
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  
  /* Hero section variables */
  --hero-gradient-mid: #1f8a5f;
  --hero-gradient-end: #156b47;
  --hero-grain-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  --search-bg-color: rgba(255, 255, 255, 0.95);
  --text-muted-color: #6c757d;
  --hover-bg-color: #eeeeee;
}

/* Dark Theme Variables */
body.dark-mode {
  --background-color: #1a1a1a;
  --secondary-background-color: #2d2d2d;
  --text-color: #ffffff;
  --accent-color: #b0b0b0;
  --border-color: #404040;
  --site-color: #EC7E4A;
  --site-color-hover: #d66a3a;
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  
  /* Card-specific dark mode variables */
  --card-bg: var(--secondary-background-color);
  --card-bg-color: var(--secondary-background-color);
  --card-border: rgba(45, 167, 113, 0.2);
  --text-primary: #ffffff;
  --text-secondary: #a0aec0;
  
  /* Hero section dark mode variables */
  --hero-gradient-mid: var(--secondary-background-color);
  --hero-gradient-end: var(--border-color);
  --hero-grain-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  --search-bg-color: rgba(45, 45, 45, 0.95);
  --text-muted-color: #a0aec0;
  --hover-bg-color: #404040;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Poppins' !important;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    /* height: 2000px; */
    overflow-y: scroll;
    background-color: var(--secondary-background-color);
}

/*
.check-back-to-top {
    bottom: 20px !important;
}
*/

body.light-mode .dark-logo-image {
    display: none;
}

.back-to-top {
    position: fixed;
    bottom: 100px;
    right: 21px;
    visibility: hidden;
    z-index: 1000;
    background-color: var(--site-color) !important;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[dir="rtl"] .back-to-top {
    right: auto;
    left: 20px;
}

body:not(:has(.chatbot-button)) .back-to-top {
    bottom: 100px !important;
}

.section-color {
    background-color: var(--secondary-background-color);
}

@font-face {
    font-family: "Poppins";
    src: url('../font/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: "Poppins";
    src: url('../font/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
}


body::-webkit-scrollbar {
    display: none !important;
}

.progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.progress {
    height: 0.3rem;
    background-color: white;
}

.progress-bar {
    width: 0;
    height: 6px;
    background-color: var(--site-color);
}


/* START NAVBAR */

.navbar {
    z-index: 1050;
}

/* Theme Toggle Buttons */
.sit_color_theam {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sit_color_theam:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.sit_darkcolor_theam svg path {
    fill: #2F2F2F;
}

.sit_lightcolor_theam svg path {
    fill: #fff !important;
}

.sit_lightcolor_theam svg {
    color: #fff;
}

.theme-scheme-dropdown {
    position: relative;
}

/* Dark mode styles for theme toggle */
body.dark-mode .sit_darkcolor_theam svg path {
    fill: #fff;
}

body.dark-mode .sit_lightcolor_theam svg path {
    fill: #2F2F2F;
}

.header {
    height: 85.11px;
}

.nav-site-name {
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: #2F2F2F;
}

.navbar-font a {
    color: #666666;
}

.navbar-font a:hover {
  color: var(--site-color) !important;
}

.pre-menu {
    color: var(--site-color) !important;
 }

.navbar-light .navbar-toggler {
    color: #ffffff !important;
}

.navbar-nav .nav-link.active {
    color: var(--site-color) !important;
}

.nav-link:hover {
    color: var(--site-color) !important;
}


.main-nav , .user-header {
    background-color: #fff;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.main-nav.fixed,
.user-header.fixed {
    position: fixed;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.navbar-toggler:focus {
    box-shadow: none;
}


/* END NAVBAR */

/* START LOADER */

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.loader {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid var(--site-color);
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* END LOADER */

/* START COMMON CSS */


#suggestions {
    z-index: 1000;
    border-radius: 34px;
    margin-top: 8px;
    margin-left: 0;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.suggestion-item:hover {
    background-color: var(--hover-bg-color, #eeeeee);
}
    
.suggestion-data:hover {
    color: var(--site-color) !important;
}

#suggestions::-webkit-scrollbar {
    display: none;
}

.suggestion-item {
    cursor: pointer;
}

.star {
    color: #FFC700;
}

.font-h6 {
    font-size: 22px !important;
    font-weight: 400;
    /* color: #2E2E2E; */
    line-height: 30px !important;
}

.font-span {
    color: var(--site-color);
}

.font-h5 {
    font-size: 26px;
    font-weight: 500;
    line-height: 38px;
    /* color: #2E2E2E; */
}

.font-p {
    font-size: 16px;
    margin-top: 10px;
    line-height: 24px;
    /* color: #666666; */
    margin-bottom: 5px;
}

.font-h4 {
    font-size: 32px;
    font-weight: 500;
    line-height: 46px;
}

.fit-btn {
    height: 48px !important;
    padding: 14px 16px 14px 16px !important;
    background-color: var(--site-color) !important;
    border-radius: 30px !important;
    line-height: 20px !important;
    width: auto !important;
}

.font-h3 {
    font-size: 40px;
    font-weight: 500;
    line-height: 52px;
    font-family: 'Poppins';
}

/* start search bar */

.search-bar {
    height: 140px;
    background-color: #2E2E2E;
    display: none;
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
    max-height: 0;
}

.search-bar.active {
    display: block;
    max-height: 140px;
}

.search-input-group {
    max-width: 500px;
    border-radius: 34px;
}

.search-input-group .form-control {
    border-radius: 34px;
    border-right: 0;
    background-color: #2E2E2E;
    color: white !important;
}

.search-input-form:focus {
    background-color: #2E2E2E !important;
    border-color: #fff !important;
    border-color: #C5C6C7 !important;
    outline: 0;
    box-shadow: none !important;
}

.search-input-group .btn {
    border-radius: 34px;
    border: 1px solid #C5C6C7;
    border-left: none !important;
    background-color: #2E2E2E;
}

.search-input-group .btn-check:focus+.btn,
.btn:focus {
    box-shadow: none !important;
}

/* end search bar */

.vertical-line {
    position: absolute;
    right: 0;
    height: 80%;
    width: 2px;
    background-color: #EDEDED;
}

.horizontal-line {
    height: 2px;
    width: 100%;
    background-color: #EDEDED;
    margin-top: 10px;
}

.top-40 {
    top: 40% !important;
}

.hr {
    /* border: 1px solid #ededed; */
    border: 1px solid #c9b1b1;
}

.banner-frame {
    height: 245px;
}

.main-card {
    /* background-color: #F9FAFB; */
    /* background-color: #f4f5f4 !important; */
    /* padding: 10px !important;
    border-radius: 12px;
    cursor: pointer; */
}

.see-all {
    cursor: pointer;
}

.search-group {
    max-width: 510px;
    border-radius: 34px;
    padding: 12px 20px 12px 20px;
}

.search-group .form-control {
    border-radius: 34px;
    border-right: 0;
    border: 1px solid #EDEDED;
    padding: 12px 20px;
    color: #000000 !important;
    padding-right: 50px;
}

.magnifer {
    position: absolute !important; 
    right: 40px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
}

.search-form:focus {
    border-color: #EDEDED !important;
    box-shadow: none !important;
    /* border-right: none !important; */
}

/* .search-group .btn {
    border-radius: 34px;
    border: 1px solid #EDEDED;
    border-left: none !important;
    background-color: #ffffff;
} */

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.tips {
    /* background-color: #e7f1ff; */
}

.accordion-item:last-of-type .accordion-button.collapsed {
    background-color: #e7f1ff;
}

/* .tips-span {
    color: #2F2F2F;
} */

.our-app-icon {
    height: 105px !important;
    object-fit: contain; 
}

.feedback-container {
    max-width: 600px;
    margin: 50px auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.feedback-btn {
    background-color: var(--site-color) !important;
}

.font-weight-500 {
    font-weight: 500
}

.owl-carousel .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 2;
}

.owl-carousel .owl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.7) !important;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
}

.owl-carousel .owl-dot.active {
    background:  var(--site-color) !important;
}

.load-more-btn {
    border: 1px solid var(--site-color);
    border-radius: 12px !important;
    color: var(--site-color);
    padding: 12px;
}

.password-input {
    padding-right: 40px !important;
}

.video-js .vjs-control-bar {
    width: 99.9% !important;
}

.video-js .vjs-control {
    width: 3em !important;
    padding-left: 0em !important;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,
.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
    left: -2.9em !important;
    transition: left 0s;
}

.video-image {
    height: 540px !important;
    border-radius: 12px !important;
}

.border-radius-12 {
    border-radius: 12px !important;
}

.border-radius-16 {
    border-radius: 16px !important;
}

.mw-50 {
    max-width: 50%;
}

.mw-45 {
    max-width: 45%;
}

.word-break {
    word-break: break-all !important;
}

.title-color {
    color: #2E2E2E;
}

.search-section {
    z-index: 5;
}

/* .exercise-video-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 37% !important;
    border-radius: 25px !important;
} */

/* .youtube-video-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 37%;
    border-radius: 25px !important;
} */

/* .video-js .vjs-tech {
    object-fit: fill !important;
} */

.list-group-item {
    border-bottom: 1px solid #ac9999 !important;
}

.breadcrumbs {
    bottom: 0; 
}

.iti__country-list {
    z-index: 5 !important;
    white-space: normal !important;
}

.iti--separate-dial-code {
    width: 100% !important;
}

.has-danger input {
    border-color: #dc3545 !important;
}

/* END COMMON CSS */

/* START MAIN BANNER */

.main-banner {
    background-color: #F9FAFB;
    min-height: 701px;
}

.main h1 {
    font-size: 54px;
    /* font-size: calc(16px + 2vw); */
    font-weight: 500;
    line-height: 72px;
    text-align: left;
    /* color: #2E2E2E; */
    font-family: 'Poppins';
}

.main span {
    font-size: 54px;
    /* font-size: calc(16px + 2vw); */
    font-weight: 500;
    line-height: 72px;
    text-align: left;
    color: var(--site-color);
}

.main-p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    margin-bottom: 50px;
    color: #666666;
}


/* END MAIN BANNER */


/* START JOIN FREE */

.join-for-free {
    max-width: 330px;
    margin: 0 auto;
    border: none;
    background-color: #2E2E2E !important;
    border-radius: 0px 0px 12px 12px !important;
    z-index: 1;
}

.join-free-p {
    text-align: justify;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #C5C6C7;
}

.btn-join {
    background-color: var(--site-color) !important;
    border-radius: 30px !important;
    padding: 14px 16px 14px 16px !important;
}

.btn-signin {
    border-radius: 30px !important;
    padding: 14px 16px 14px 16px !important;
    border: 1px solid #FFFFFF !important;
}


/* .hover-effect:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
} */

/* END JOIN FREE  */

/* START PREMIUM CARD */

.popup-img {
    z-index: 1;
}

.explore-btn {
    padding: 14px 16px 14px 16px !important;
    border-radius: 30px !important;
    border: 1px solid #2F2F2F !important;
}

.free-trial {
    padding: 14px 16px 14px 16px !important;
    border-radius: 30px !important;
    background-color: var(--site-color) !important;
}

.trial-card {
    z-index: 2;
}

/* END PREMIUM CARD */

.certificate {
    padding-bottom: 60px;
    padding-top: 60px;
    background-color: #F9FAFB;
}

/* START ULTIMATE WORKOUT */

.ultimate-title {
    margin-top: 90px !important;
    margin-bottom: 60px;
}

.workout {
    padding-bottom: 60px;
}

.workout h3 {
    width: 896px;
}

/* .workout .container {
    margin-bottom: 119px;
} */

.blockquote-card p {
    max-width: 521px;
}

.blockquote-card-outer {
    border-right: .4rem solid transparent;
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    position: relative;
    cursor: pointer;
}

.blockquote-card-inner {
    background-color: transparent;
    padding: 10px 10px;
    position: relative;
}

.blockquote-card.selected .blockquote-card-outer {
    border-right: .4rem solid var(--site-color);
}

.blockquote-card.selected .blockquote-card-inner {
    /* background-color: var(--site-color); */
    padding-right: 20px;
}

.workout-type-section img{
    border-radius: 12px 12px 0 0;
}

/* END ULTIMATE WORKOUT */


/* START NUTRITION */

.nutrition {
    /* margin-top: 90px; */
    padding: 60px 0;
}

.nutrition p {
    color: #666666;
    line-height: 1.5;
}

/* .nutrition-btn {
    max-width: 199px !important;
} */

/* END NUTRITION */

/* START FITNESS PRODUCT */

.fitness-product {
    background-color: #F9FAFB;
    padding-top: 90px;
    padding-bottom: 115px;
}

.fitness-title {
    margin-bottom: 60px;
}

.fitness-product-card-outer {
    border-right: .4rem solid transparent;
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    position: relative;
    cursor: pointer;
}

.fitness-product-card p {
    max-width: 521px;
}

.fitness-product-card-inner {
    background-color: transparent;
    padding: 10px 10px;
    position: relative;
}

.fitness-product-card.selected .fitness-product-card-outer {
    border-right: .4rem solid var(--site-color);
}

.fitness-product-card.selected .fitness-product-card-inner {
    /* background-color: var(--site-color); */
    padding-right: 20px;
}

/* END FITNESS PRODUCT */

/* START FITNESS BLOG */

.fitness-blog .container {
    margin-bottom: 91.63px;
}

.fitness-blog {
    /* margin-top: 133px; */
    padding: 80px 0 1px 0;
}

.fitness-blog p {
    color: #666666;
    font-size: 18px;
    line-height: 24px;
}

/* END FITNESS BLOG */

/* START DOWNLOAD APP */

.download-app {
    padding: 90px 0;
}

.download-app p {
    margin: 20px 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
}

/* END DOWNLOAD APP */

/* START CLIENT REVIEW */

#client-slider {
    margin-top: 60px;
}

.client-review {
    padding: 60px 0;
    background-color: #F9FAFB;
}

.fixed-card {
    min-height: 175px;
    max-width: 630px;
}

.client-card-body {
    height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-card-body h5 {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #2E2E2E;
    height: 24px;
    overflow: hidden;
}

.client-card-body h6 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
    height: 24px !important;
    overflow: hidden;
}

.client-card-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #C5C6C7;
}

.client-img {
    height: auto;
    width: 100px !important;
}

.review {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
}

.rating-section {
    flex-wrap: wrap;
}

.rating-content {
    flex: 1;
}

.owl-controls .owl-buttons {
    text-align: center;
    margin-top: 20px;
}

/* .owl-controls .owl-buttons .owl-prev {

    background: #fff url('../images/prev-arrow.png') no-repeat center center;
    position: absolute;
    top: -50%;
    left: 76%;
    border-radius: 50px;
    box-shadow: 3px 14px 25px -10px #92b4d0;
    width: 50px;
    height: 50px;
    border: 1px solid #EDEDED;
    transition: background 0.5s ease 0s;
    color: #1C274C;
}

.owl-controls .owl-buttons .owl-next {
    background: #fff url('../images/next-arrow.png') no-repeat center center;
    position: absolute;
    top: -50%;
    left: 85%;
    border-radius: 50px;
    box-shadow: 3px 14px 25px -10px #92b4d0;
    width: 50px;
    height: 50px;
    border: 1px solid #EDEDED;
    transition: background 0.5s ease 0s;
    color: #1C274C;
}

.owl-controls .owl-buttons .owl-prev:after,
.owl-controls .owl-buttons .owl-next:after {
    content: "";
} */

/* END CLIENT REVIEW */

/* START NEWSLETTER */

.newsletter{
    border-radius: 20px;
    background-color: var(--site-color);
}

.responsive-heading {
    font-size: calc(14px + 1.5vw);
    max-width: 790px;
}

.newsletter form{
    max-width: 520px;
}

.newsletter-btn{
    border-radius: 30px !important;
    padding: 8px 16px !important;
    background-color: #2E2E2E;
}

.search input:focus {
    box-shadow: none;
    border: 1px solid #ffffff;
}

.custom-input::placeholder {
    color: white !important;
} 


/* END NEWSLETTER */


/* START FOOTER */

.footer {
    background-color: #2E2E2E;
}

footer .row {
    margin-top: 30px;
}

.site-name {
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    cursor: pointer;
}
/*
.subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}
*/
.site-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    text-decoration: none;
}
/*
.qr {
    margin-bottom: 86px;
}
*/
/* END FOOTER */


/* START DIET SECTION */

.category-diet-img {
    height: 81px !important;
    border-radius: 12px 12px 0px 0px;
    /* width: 138px !important; */
}

.diet-categories .card {
    border-radius: 12px !important;
}

.diet-categories img {
    border-radius: 12px 12px 0px 0px !important;
    /* height: 170px !important; */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;    
}

.diet-categories .card-body {
    border-radius: 0px 0px 12px 12px;
    /* background-color: #F9FAFB; */
}

/* .diet-categories .card-body p {
    color: #2F2F2F;
} */

.main-card span {
    /* color: #2E2E2E; */
}

.bg-badge-orange {
    background-color: var(--site-color) !important;
}

.bg-badge-green {
    background-color: #2DA771 !important;
}

.card-heart {
    border-radius: 30px !important;
    height: 30px;
    width: 30px;
    background-color: #FDF2ED !important;
}

.card-heart-normal {
    color: #666666;
}

.card-heart-heart {
    color: red !important;
}

/* .banner-content {
    left: 16%;
} */

.banner-content a,
.banner-content span {
    color: #ffffff;
}

.banner-content a:hover {
    color: var(--site-color) !important;
}

/* .diet-categories-section {
    margin-top: 30px;
} */

.diet-categories-section img {
    /* width: 189px; */
    border-radius: 12px 12px 0px 0px;
    height: 107px;
}

/* Start diet detail */

.detail-frame {
    height: 146px
}

/* .diet-details {
    background-color: #2E2E2E;
} */

.nutrition-info div {
    text-align: center;
    position: relative;
    flex: 1;
}

.nutrition-info div:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80px;
    border-right: 1px solid #C5C6C7;
}

.nutrition-info div p {
    color: #666666
}

.nutrition-btn {
    padding: 10px 20px 10px 20px !important;
    background-color: var(--site-color) !important;
    height: 44px;
}

.nutrition-fav-btn {
    padding: 10px 20px 10px 20px !important;
    /* background-color: #d5d5d5 !important; */
    border: 1px solid #2E2E2E !important;
    height: 44px;
}

.ingredients {
    padding-bottom: 20px;
    padding-top: 40px;
}

.ingredients-data {
    border-radius: 12px !important;
}

.ingredients span {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #2E2E2E;
}

.instructions p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
    text-align: justify
}

.text-p {
    text-indent: 3em;
}

.detail-img {
    height: 380px !important;
    border-radius: 10px;
    object-fit: fill;
}
/* end diet-detail */


/* END DIET SECTION */

/* START PRICING PLAN SECTION */

.bg-color {
    background-color: #F9FAFB;
    padding: 80px 0;
}

.price {
    color: var(--site-color);
}

.total-time {
    color: #666666;
}

.subscribe-btn {
    width: 229px;
    height: 40px;
    border-radius: 30px !important;
    background-color: var(--site-color) !important;
}

.pricing-card {
    box-shadow: 0px 4px 15px 0px #0000001A;
    border-radius: 12px !important;
    overflow: hidden;
}

/* .price-subcard {
    background-color: #FDF2ED;
} */

.pricing-card-body {
    background-color: #F9FAFB;
}

.pricing-card-body p {
    color: #666666;
}

/* END PRICING PLAN SECTION */

/* START PAYMENT SECTION */

.payment-container {
    max-width: 400px !important;
    margin: 50px auto !important;
    padding-bottom: 300px !important;
}

.payment-option {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: border-color 0.3s !important;
    border: 1px solid #EDEDED !important;
}

.payment-option img {
    width: 40px !important;
    height: 40px !important;
    margin-right: 15px !important;
}

.payment-option .form-check-input {
    margin-left: 0 !important;
    margin-right: 15px !important;
}

.payment-option .form-check-label {
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
}

.payment-option .form-check-input:checked {
    background-color: var(--site-color) !important;
    border-color: var(--site-color) !important;
}

.payment-option .form-check-input:focus {
    box-shadow: none !important;
}

.payment-option .form-check .payment-option .form-check-input {
    margin-left: 0.5em !important;
}

.payment-option .form-check-input:checked~.form-check-label::before {
    content: '';
    border: 1px solid var(--site-color);
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.btn-select {
    margin-top: 40px !important;
    background-color: var(--site-color) !important;
    border: none !important;
    padding: 10px 16px 10px 16px !important;
    border-radius: 30px !important;
}

/* END PAYMENT SECTION */

/* START WORKOUT SECTION */

#body-part-slider {
    height: 140px;
}

#body-part-slider img:hover {
    border: 2px solid var(--site-color);
}

#equipment-slider img {
    border-radius: 12px !important;
    height: 200px !important;
    /* width: 200px !important; */
}

.bodypart-title {
    white-space: nowrap;            
    overflow: hidden;        
    text-overflow: ellipsis;
    max-width: 100%;   
}

.body-part-img {
    height: 100px !important;
    width: 100px !important;
}

.workout-level img {
    border-radius: 12px !important;
    height: 150px !important;
}

.workout-level .card{
    border-radius: 12px !important;
}

.card-img-overlay {
    top: 76% !important;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    padding: 0.5rem !important;
    width: 100%;
    word-wrap: break-word;
}

.card-img-overlay p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.equipment-img {
    border-radius: 16px;
    /* height: 210px;
    width: 160px; */
    width: 100% !important;
    height: 250px;
    aspect-ratio: 16 / 9;
    object-fit: fill;    
}

.workout-content li span:nth-of-type(2) {
    color: var(--site-color);
}

.workout-content-span {
    font-weight: 500;
    line-height: 19.2px;
}

.workout-content li span {
    font-size: 12px !important;
    font-weight: 400;
}

.workout-slider img {
    border-radius: 12px 12px 0px 0px;
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;    
}

.workout-img, .workout-slider-img {
    /* border-radius: 12px !important;
    height: 160px !important;
    width: 250px !important; */
    border-radius: 12px !important;
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover; 
}

.workout-level p {
    font-size: 24px;
    font-weight: 600;
}

.workout-card a {
    position: relative;
    display: block;
}

.workout-card a::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    border-radius: 12px;
}

.workout-card .workout-card-text {
    position: relative;
    z-index: 1;
    left: 0;
    bottom: 10px;
}

.workout-card-pro {
    z-index: 1;
}

.workout-level-card a {
    position: relative;
    display: block;
}

.workout-level-card a::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    border-radius: 12px;
}

.workout-level-card .workout-level-card-text {
    position: relative;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 15px;
}

.workout-content li {
    line-height: 12px;
}

#workout-level-section .workout-level-card img,
#exercise-level-section .workout-level-card img {
    height: 200px !important;
}

/* strat Body parts exercises  */

.bodyparts-exercises img {
    height: 155px !important;
    width: 155px !important;
    border-radius: 160px;
}

.bodyparts-exercises img:hover {
    border: 2px solid var(--site-color);
}

/* end Body parts exercises  */

/* start Body parts exercises list */

.exercises-list img {
    /* height: 180px;
    width: 300px; */
    border-radius: 12px 12px 0px 0px; 
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;    
}

.exercises-list-card-body {
    border-top: 0px !important;
    /* border: 1px solid #EDEDED; */
    border-radius: 0px 0px 12px 12px;
}

.exercises-list-card-body p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    /* color: #2F2F2F; */
}

.exercises-list-card-body span {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #8A8A8A;
}

.bg-free-badge {
    font-weight: 400 !important;
    width: 50px;
    border-radius: 37px !important;
    background-color: #2DA771;
}

.bg-premium-badge {
    font-weight: 400 !important;
    width: 79px;
    border-radius: 37px !important;
    background-color: var(--site-color);
}

/* end Body parts exercises list */

/* start body parts exercises detail */

.exercises-detail {
    padding-bottom: 30px;
}

.custom-table span:first-child {
    /* color: #2E2E2E; */
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.custom-table span {
    color: #666666;
    font-weight: 400;

}

.custom-table thead,
tbody {
    background-color: #FAFAFA;
}

.custom-table th,
td {
    padding: 1rem;
    /* border-radius: 12px; */
}

.custom-table th:not(:last-child),
.custom-table td:not(:last-child) {
    border-right: 1px solid #e9ecef;
}

.custom-table th {
    border-bottom: 5px solid white;
}

.instructions p {
    color: #8A8A8A !important;
}

.body-parts img {
    height: 60px;
    width: 60px;
    border-radius: 60px;
}

.body-parts img:hover {
    border: 2px solid var(--site-color);
}

.equipment img {
    /* width: 111.79px; */
    /* height: 150px; */
    border-radius: 10px;
}

.equipment p {
    white-space: nowrap;
    /* width: 100px; */
    overflow: hidden;
    text-overflow: clip;
}

/* end body parts exercises detail */

/* start workout detail */

.vr {
    background-color: #C5C6C7;
    height: 80px;
    width: 2px;
}

.workout-detail {
    background-color: #2E2E2E;
}

.workout-detail-img {
    border-radius: 10px;
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;   
}

.favourite-btn {
    padding: 10px 20px 10px 20px !important;
    border: 1px solid #FFFFFF !important;
}

.day-btn {
    color: #C5C6C7 !important;
    border: none;
    transition: all 0.3s ease !important;
    border-radius: 40px !important;
}

.day-btn.active,
.day-btn:hover {
    background-color: var(--site-color);
    color: white !important;
}

/* end workout detail */

/* start workout see all  */

.filter-btn.active {
    background-color: var(--site-color) !important;
    color: #fff !important;
}

.btn-custom {
    border-radius: 40px !important;
    padding: 10px 20px 10px 20px !important;
    border: 1px solid #C5C6C7 !important;
    margin-right: 10px !important;
    color: #C5C6C7 !important;
    margin-bottom: 5px !important;
}

.btn-selected {
    background-color:  var(--site-color)  !important;
    color: white !important;
}

.btn-tag {
    background-color: #FDF2ED !important;
    padding: 10px 20px 10px 20px !important;
    border-radius: 40px !important;
    color: #666666 !important;
    border: none !important;
    margin-right: 10px !important;
}

.btn-clear {
    margin-bottom: 5px !important;
    background-color:  var(--site-color) !important;
    border-radius: 40px !important;
    padding: 8px 20px 8px 20px !important;
    color: white !important;
}

.check-form:checked {
    background-color:  var(--site-color) !important;
    border-color:  var(--site-color) !important;
}

.check-label {
    margin-right: 5px !important;
    color: #6c757d !important;
}

.check-form:focus {
    border-color:  var(--site-color) !important;
    box-shadow: none !important;
}

.check-form:checked+.check-label {
    color: var(--site-color) !important;
}
    
.btn-select-all {
    border: 1px solid #2E2E2E; 
    color: #2E2E2E;
    border-radius: 40px !important;
    padding: 8px 20px 8px 20px !important;
    margin-left: 20px !important;
}

.btn-select-all:hover,.btn-clear:hover{
    background-color: var(--site-color) !important;
    /* color: #fff !important; */
    border: 1px solid var(--site-color) !important;
}

/* end workout see all  */


/* END WORKOUT SECTION */

/* START PRODUCT SECTION */

/* start product detail */

.productcategory_image {
    height: 100px !important;
    border-radius: 12px 12px 0px 0px !important;
}

.product_image {
    height: 190px !important;
    border-radius: 16px 16px 0px 0px !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;   
}

.product_section {
    padding-bottom: 60px;
}

.product-img {
    height: 379px !important;
}

.product-price {
    font-size: 32px;
    font-weight: 500;
    line-height: 46px;
}

.product-btn {
    width: 330px !important;
}

/* end product detail */

/* END PRODUCT SECTION */

/* START BLOG SECTION */

.blog-time {
    padding: 5px;
    border-radius: 8px;
    background-color: #FFFFFF33;
}

.blog img {
    object-fit: fill;
    border-radius: 12px;
    height: 560px;
}

.blog-card {
    /* box-shadow: 0px 4.12px 28.84px 0px #C5C6C733; */
    border-radius: 12px !important;
    /* background-color: #222738 !important; */
}

.trending-category {
    text-decoration: underline;
    list-style: none;
    color: #666666;
    font-size: 14px;
}    

.blog-cat {
    list-style: none;
    text-decoration: underline;
    color: var(--site-color);
    font-size: 14px;
}

/* start recent blog */

.blog-card-time {
    color: #8A8A8A;
}

.blog-card-time span {
    font-size: 18px;
}

.blog-card-time ul li {
    color: #8A8A8A;
}

.recent-blog img {
    border-radius: 12px 12px 0px 0px;
    height: 200px !important;
}

.read-more {
    cursor: pointer;
}

/* end recent blog */

/* start trending blog */

.trending-blog-img {
    border-radius: 12px 12px 0px 0px !important;
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover; 
}

/* end trending blog */

/* satrt blog details */

.post-img {
    border-radius: 8px !important;
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;    
    /* height: 120px !important;
    width: 120px !important; */
}

.blog-img {
    border-radius: 16px !important;
    /* height: 465px; */
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;    
}

.favourite {
    height: 44px;
    padding: 10px 20px 10px 20px !important;
    border-radius: 50px !important;
    border: 1px solid #666666 !important;
    color: #666666 !important;
}

.related-blogs {
    padding: 10px;
    color: #2E2E2E;
    border-left: 3px solid var(--site-color);
}

.related-blog img {
    border-radius: 12px;
    height: 100px !important;
    max-width: 100px !important;

}

.hash-btn {
    height: 40px;
    padding: 8px 16px 8px 16px !important;
    border-radius: 24px !important;
    border: 1px solid var(--site-color) !important;
    color: var(--site-color) !important;
}

.related-blog-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    /* color: #2E2E2E; */
}

/* end blog details */

/* END BLOG SECTION */


/* START LOGIN SECTION */

/* start login page */

.carousel-img {
    height: 550px !important;
}

.carousel-control-prev,
.carousel-control-next {
    align-items: end !important;
    width: 40% !important;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 1rem !important;
    height: 1rem !important;
}

.carousel-caption {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    bottom: -25px !important;
}

.carousel-indicators {
    top: 100% !important;
}

.login-section,
.forget-section,
.otp-section {
    background-color: #F9FAFB;
}

.heading {
    color: var(--site-color) !important;
}

.login-btn {
    height: 52px;
    border-radius: 30px !important;
    background-color: var(--site-color) !important;
    /* background-color: #2DA771; */
    padding: 14px 16px 14px 16px !important;
}

.google-otp-btn {
    height: 52px !important;
    padding: 14px 16px 14px 16px !important;
    border-radius: 30px !important;
    color: #2F2F2F;
}

.google-otp-btn img {
    max-width: 24px !important;
    height: auto !important;
}

.forgot-password,
.register-now {
    color: var(--site-color) !important;
}

.forgot-password:hover {
    color: var(--site-color) !important;
}

.terms_condition_privacy > a {
    color: var(--site-color) !important;
    text-decoration: none;
}

.form-control-data {
    height: 44px !important;
    /* padding: 10px !important; */
    border-radius: 12px !important;
    border: 1px solid #C5C6C7 !important;
    color: #666666 !important;
    background-color: #F9FAFB !important;
    transition: none !important;
}

.form-phone-data {
    height: 44px !important;
    /* padding: 10px !important; */
    border-radius: 12px !important;
    border: 1px solid #C5C6C7 !important;
    color: #666666;
    background-color: #F9FAFB !important;
}

.form-phone-data:focus {
    color: #666666 !important;
    background-color: #F9FAFB;
    border: 1px solid var(--site-color) !important;
    box-shadow: none !important;
}

.form-control-data:focus {
    color: #666666;
    background-color: #F9FAFB;
    border: 1px solid var(--site-color) !important;
    box-shadow: none !important;
}

.form-input-data {
    height: 44px !important;
    padding: 10px !important;
    border: 1px solid #C5C6C7 !important;
    color: #666666;
    background-color: #F9FAFB !important;
    border-radius: 12px !important;
}

.form-input-data:focus {
    border: 1px solid var(--site-color) !important;
    z-index: 1 !important;
    box-shadow: none !important;
}

.customcheck:checked {
    background-color: var(--site-color) !important;
    border-color: var(--site-color) !important;
}

.customcheck:focus {
    border: 1px solid #C5C6C7 !important;
    box-shadow: none !important;
}

.login-hr {
    color: #EDEDED;
    height: 3px !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #F9FAFB inset !important;
    -webkit-text-fill-color: #666666 !important;
}

.auth-card {
    background-color: #F9FAFB;
}

/* end login page */

/* start otp login */

.arrow-container {
    background-color: #F9FAFB;
    width: 50px;
    height: 50px;
    z-index: 5;
}

.arrow-container i {
    color: var(--site-color);
    font-size: 25px;
}

.pattern-img {
    z-index: 3;
}

.otp-section .card-body {
    padding-top: 10rem;
}

.back-btn {
    z-index: 5;
}

.otp-modal-content {
    background-color: #f4f5f8 !important;
}
/* end otp login */

/* start register page */

.custom-radio:checked {
    background-color: var(--site-color) !important;
    border-color: var(--site-color) !important;
}

.custom-radio:focus {
    box-shadow: none !important;
}

.weight-unit {
    padding-right: 110px !important;
}

.height-unit {
    padding-right: 120px !important;
}

.input-group .btn-group {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
}

.btn-unit {
    background-color: #EDEDED !important;
}

.btn-check:focus+.btn-unit {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

.btn-unit:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

/* Recipe Details Page - Advanced UI Design */
.recipe-details-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Immersive Hero Section */
.recipe-hero-immersive {
    position: relative;
    background: linear-gradient(135deg, var(--site-color) 0%, #1f8a5f 50%, #156b47 100%);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.recipe-hero-immersive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(255, 255, 255, 0.04) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 15px 0;
}

.hero-content .row {
    align-items: flex-start;
}

.min-vh-75 {
    min-height: 75vh;
}

/* Recipe Image with Advanced Effects */
.recipe-hero-image-wrapper {
    position: relative;
    perspective: 1000px;
}

.recipe-image-container {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.recipe-image-container:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.4);
}

.recipe-hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
    cursor: pointer;
}

.recipe-image-container {
    cursor: pointer;
    position: relative;
}

.recipe-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 20%, 
        rgba(255, 255, 255, 0.3) 80%, 
        transparent 100%);
    z-index: 1;
}

.image-zoom-hint {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
}

.recipe-image-container:hover .image-zoom-hint {
    opacity: 1;
}

.image-zoom-hint i {
    margin-right: 5px;
}

/* Desktop Image Enhancements */
@media (min-width: 992px) {
    
    .recipe-image-container {
        max-width: 95%;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    
    .recipe-image-container {
        max-width: 100%;
    }
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(var(--site-color), 0.2), rgba(31, 138, 95, 0.2));
    pointer-events: none;
}

.image-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    pointer-events: none;
}

.decoration-circle {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    animation: pulse 2s ease-in-out infinite;
}

.decoration-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    position: absolute;
    bottom: 20px;
    right: 0;
    transform: rotate(-45deg);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

/* Premium Badge Floating */
.premium-badge-floating {
    position: absolute;
    top: 10px;
    right: 5px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #2c3e50;
    padding: 5px 10px;
    border-radius: 30px;
    font-size: 0.5rem;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    z-index: 10;
    animation: float-badge 3s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

@keyframes float-badge {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.premium-badge-floating i {
    margin-right: 8px;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

/* Recipe Header Content */
.recipe-header-content {
    color: white;
    text-align: left;
}

/* Recipe Title Section with Servings Badge */
.recipe-title-section {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
}

.recipe-title-hero {
    margin-bottom: 10px;
}

.servings-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.servings-badge:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.servings-badge i {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Elegant Breadcrumb */
.breadcrumb-elegant {
    margin-bottom: 30px;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.breadcrumb-link:hover {
    color: white;
    transform: translateY(-2px);
}

.breadcrumb-link::after {
    content: '›';
    margin-left: 15px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
}

.breadcrumb-current {
    color: white;
    font-weight: 600;
    opacity: 0.9;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Recipe Title Hero */
.recipe-title-hero {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-glow 3s ease-in-out infinite;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    margin-bottom: 20px;
}

@keyframes title-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

/* Recipe Description Elegant */
.recipe-description-elegant {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    margin-bottom: 40px;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: left;
}

/* Smart Meta Tags */
.recipe-meta-smart {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
    justify-content: flex-start;
}

.meta-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.meta-tag:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.meta-tag i {
    font-size: 1rem;
    opacity: 0.9;
}

/* Recipe Tags Section */
.recipe-tags-section {
    margin-bottom: 40px;
    text-align: left;
}

.tags-section-title {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.tags-section-title i {
    color: var(--site-color);
    font-size: 1.1rem;
}

.recipe-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.recipe-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.recipe-tag:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.recipe-tag i {
    font-size: 0.6rem;
    color: var(--site-color);
    opacity: 0.8;
}

/* Mobile Nutrition Tags */
.mobile-nutrition-tags-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.nutrition-tag {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--bs-body-color);
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    text-transform: capitalize;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 100%;
    min-height: 70px;
}

.nutrition-tag:hover {
    background: var(--bs-secondary-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--bs-primary);
}

.nutrition-tag i {
    font-size: 1.1rem;
    opacity: 0.9;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.nutrition-tag .nutrition-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nutrition-tag .nutrition-name {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.nutrition-tag .nutrition-value {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Interactive Stats Grid */
.recipe-stats-interactive {
    margin-top: 40px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 5px 10px;
    text-align: center;
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 10px;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.stat-item:hover::before {
    left: 100%;
}

.stat-item:hover {
    transform: translateY(-8px) scale(1.05);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.stat-icon {
    margin-bottom: 15px;
}

.stat-icon i {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.stat-item:hover .stat-icon i {
    transform: scale(1.2) rotate(5deg);
    color: white;
}

.stat-content {
    position: relative;
    z-index: 2;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Main Content */
.recipe-main-content {
    background: white;
    position: relative;
    border-radius: 50px 50px 0 0;
    padding: 80px 0 60px;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.1);
}

/* Modern Section Cards */
.recipe-section-modern {
    background: white;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 40px;
    margin-bottom: 30px;
    border: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.recipe-section-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--site-color), #1f8a5f, #156b47);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.recipe-section-modern:hover::before {
    transform: scaleX(1);
}

.recipe-section-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Section Header Modern */
.section-header-modern {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.section-icon {
    min-width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--site-color), #1f8a5f);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 8px 25px rgba(var(--site-color), 0.3);
    transition: all 0.3s ease;
}

.recipe-section-modern:hover .section-icon {
    transform: rotate(10deg) scale(1.1);
}

.section-title-modern {
    color: #2c3e50;
    font-weight: 700;
    margin: 0;
    font-size: 2rem;
    position: relative;
}

.nutrition-per-serving {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
    font-style: italic;
}

/* Mobile responsive: Show "(per serving)" on new line */
.mobile-break {
    display: none;
}

@media (max-width: 768px) {
    .mobile-break {
        display: block;
    }
    
    .nutrition-per-serving {
        font-size: 0.8rem;
        margin-left: 0;
    }
}

.section-decoration {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--site-color), transparent);
    border-radius: 1px;
}

/* Section Content Modern */
.section-content-modern {
    color: #6c757d;
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Ingredients List Modern */
.ingredients-list-modern {
    font-size: 1.1rem;
    line-height: 2;
    color: #2c3e50;
}

.ingredients-list-modern br {
    margin-bottom: 12px;
    display: block;
    content: "";
}

/* Instructions Steps */
.instructions-steps {
    font-size: 1.1rem;
    line-height: 2;
    color: #2c3e50;
}

.instructions-steps br {
    margin-bottom: 15px;
    display: block;
    content: "";
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 1.1rem;
    margin: 0;
}

/* Nutrition Section */
.nutrition-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.nutrition-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

@media (max-width: 768px) {
    .nutrition-grid-modern {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .nutrition-card-modern {
        padding: 20px;
    }
    
    .nutrition-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

.nutrition-card-modern {
    background: var(--secondary-background-color);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid var(--card-border, rgba(45, 167, 113, 0.1));
    color: var(--text-primary, #2c3e50);
}

.nutrition-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.nutrition-card-modern:hover .nutrition-icon {
    transform: scale(1.1);
    border-color: var(--site-color);
}

.nutrition-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.nutrition-icon {
    width: 50px;
    height: 50px;
    background: var(--secondary-background-color);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.nutrition-info {
    flex: 1;
}

.nutrition-name {
    font-weight: 700;
    color: var(--text-primary, #2c3e50);
    font-size: 1.1rem;
    margin: 0 0 5px 0;
}

.nutrition-value-modern {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.nutrition-value-modern .value {
    font-weight: 800;
    color: var(--site-color);
    font-size: 1.3rem;
}

.nutrition-value-modern .unit {
    color: var(--text-secondary, #6c757d);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Progress bar styles removed - now using icon-based display */

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}



/* Modern Button */
.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--site-color), #1f8a5f);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(var(--site-color), 0.3);
    border: none;
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(var(--site-color), 0.4);
    color: white;
    text-decoration: none;
}

.btn-modern i {
    font-size: 0.9rem;
}

/* Image Modal Styles */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.image-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s ease;
}

.image-modal-close:hover {
    color: var(--site-color);
}

.image-modal-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
    .recipe-hero-image {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center;
    }
    
    .recipe-image-container {
        max-width: 100%;
        margin: 0;
    }
    
    .recipe-title-hero {
        font-size: 1.5rem;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    .breadcrumb-current {
        max-width: 200px;
        font-size: 0.9rem;
    }
    
    .breadcrumb-list {
        gap: 10px;
    }
    
    .breadcrumb-link {
        font-size: 0.9rem;
    }
    .recipe-header-content {
        padding: 10px 0px;
    }
    
    .recipe-description-elegant {
        font-size: 1.1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .stat-item {
        padding: 8px 15px;
        margin: 15px 0px;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .recipe-main-content {
        margin-top: -15%;
        border-radius: 30px 30px 0 0;
        padding: 50px 0 40px;
    }
    
    .recipe-section-modern {
        padding: 25px;
        border-radius: 20px;
    }
    
    .section-title-modern {
        font-size: 1.5rem;
    }
    
    .nutrition-grid-modern {
        grid-template-columns: 1fr;
    }
    

    
    .image-zoom-hint {
        display: none;
    }
    
    .recipe-tags-container {
        gap: 12px;
    }
    
    .recipe-tag {
        padding: 10px 14px;
        font-size: 0.8rem;
        margin-bottom: 6px;
    }
    
    .nutrition-tag {
        padding: 12px 14px;
        font-size: 0.85rem;
        gap: 8px;
        min-height: 65px;
    }
    
    .nutrition-tag i {
        font-size: 1rem;
        width: 18px;
        height: 18px;
    }
    
    .nutrition-tag .nutrition-name {
        font-size: 0.75rem;
    }
    
    .nutrition-tag .nutrition-value {
        font-size: 0.8rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .recipe-hero-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: center;
    }
    
    .recipe-image-container {
        border-radius: 15px;
    }
    
    .recipe-title-hero {
        font-size: 1.3rem;
        line-height: 1.4;
    }
    
    .breadcrumb-current {
        max-width: 150px;
        font-size: 0.8rem;
    }
    
    .breadcrumb-list {
        gap: 8px;
    }
    
    .breadcrumb-link {
        font-size: 0.8rem;
    }
    
    .breadcrumb-link::after {
        margin-left: 8px;
    }
    
    .tags-section-title {
        font-size: 1.1rem;
    }
    
    .mobile-nutrition-tags-container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .nutrition-tag {
        padding: 10px 12px;
        font-size: 0.8rem;
        gap: 6px;
        min-height: 60px;
    }
    
    .nutrition-tag i {
        font-size: 0.9rem;
        width: 16px;
        height: 16px;
    }
    
    .nutrition-tag .nutrition-name {
        font-size: 0.7rem;
    }
    
    .nutrition-tag .nutrition-value {
        font-size: 0.75rem;
    }
    
    .recipe-image-container::after {
        display: none;
    }
}

/* Extra extra small screens - single column for very small devices */
@media (max-width: 360px) {
    .mobile-nutrition-tags-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .nutrition-tag {
        padding: 10px 12px;
        font-size: 0.8rem;
        gap: 6px;
        min-height: 50px;
    }
    
    .nutrition-tag i {
        font-size: 0.9rem;
        width: 16px;
        height: 16px;
    }
    
    .nutrition-tag .nutrition-name {
        font-size: 0.8rem;
    }
    
    .nutrition-tag .nutrition-value {
        font-size: 0.8rem;
    }
}

/* Image Modal Styles */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.image-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s ease;
}

.image-modal-close:hover {
    color: var(--site-color);
}

.image-modal-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.input-group .btn-check:checked+.btn {
    background-color: var(--site-color) !important;
    color: white !important;
}

.input-group .btn-outline-secondary {
    color: #8A8A8A !important;
}

.input-group .btn-outline-secondary:hover {
    background-color: #EDEDED !important;
}

.pattern-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none;
}

/* end register page */

/* END LOGIN SECTION */

/* START USER PROFILE SECTION */

/* Start common css */

.profile_image {
    border-radius: 32px !important;
}

.input-form {
    height: 44px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #EDEDED !important;
    background-color: #ffffff;
    transition: none !important;
}

.input-form-data {
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid #EDEDED !important;
    background-color: #ffffff;
    transition: none !important;
}

.input-form:focus {
    background-color: #ffffff;
    border: 1px solid var(--site-color) !important;
    box-shadow: none !important;
}

.input-form-data:focus {
    background-color: #ffffff;
    border: 1px solid var(--site-color) !important;
    box-shadow: none !important;
}

.accordion-item {
    background-color: transparent !important;
    border-radius: 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.accordion-button {
    transition: none !important;
}

.accordion-button:not(.collapsed) {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.accordion-button:focus {
    border-color: rgba(0, 0, 0, .125) !important;
    box-shadow: none !important;
}

.accordion-button::after {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 9.10571L12 15.1057L19 9.10571" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    transform: rotate(360deg) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 9.10571L12 15.1057L19 9.10571" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    transform: rotate(181deg) !important;
}


/* End common css */

/* Start sidebar */

.sidebar-content ul li a {
    color: #666666;
    text-decoration: none;
}

/* .sidebar-content .nav-link.active { */
    /* color: var(--site-color) !important; */
    /* background-color: #FDF2ED !important; */
/* } */

.sidebar-content .nav-link:hover {
    color: var(--site-color) !important;
}

/* End sidebar */

/* Satrt Dashboard */

.btn-info {
    width: 125px;
    height: auto;
    padding: 14px 16px 14px 16px !important;
    border-radius: 30px !important;
    background-color: var(--site-color) !important;
}

.btn-primary{
    border-color: var(--site-color) !important;
    background-color: var(--site-color) !important;
}

.nav-link:focus, .nav-link:hover {
    color: #666666 !important;
}

.dropdown-toggle {
    color: #666666 !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--site-color) !important;
    background-color: #fff !important;
}

.user-info {
    min-width: 0;
    word-wrap: break-word;
}

/* End Dashboard */

/* Start favorite section */

.favourite-tab {
    color: #666666 !important;
}

.favourite-tab.active {
    color: var(--site-color) !important;
    border-bottom: 2px solid;
}

.user-img {
    width:100px;
    height:100px
}

/* End favorite section */

/* Start change password */

.change-pwd-btn {
    padding: 10px 16px 10px 16px !important;
    border-radius: 30px !important;
    background-color: var(--site-color) !important;
}

/* End change password */

/* Start profile edit */

.profile-save-btn {
    padding: 10px 16px 10px 16px !important;
    border-radius: 30px !important;
    background-color: var(--site-color) !important;
}

.upload-img-btn {
    background-color: #252525 !important;
}

/* End profile edit */

/* Start metrics settings  */

.form-check-input:checked {
    background-color: var(--site-color) !important;
    border-color: var(--site-color) !important;
}

.metrics-check-input {
    background-color: #EDEDED !important;
    border-color: #EDEDED !important;
    width: 2em;
    height: 1em;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 1em;
    position: relative;
    outline: none;
    transition: background-color 0.3s ease;
}

.switch-container {
    display: flex;
    justify-content: space-between ;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid #EDEDED !important;
    border-radius: 10px;
    margin-bottom: 10px;
}

.switch-container .form-check-input {
    cursor: pointer;
}

.form-check-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* End metrics settings */

/* Start Subscription  */

.nodata-img {
    height: 166.38px !important;
    width:130px !important;
}

.view-plan-btn {
    max-width: 429px !important;
    height: 40px !important;
    padding: 10px 16px !important;
    border-radius: 30px !important;
    background-color: var(--site-color) !important;
    box-sizing: border-box !important;
}

.payment-history .card-body {
    border-radius: 12px;
}

.subscription-active {
    background-color: #19922626 !important;
    /* color: #199226 !important; */
}

.subscription-inactive{
    background-color: #F4462C26 !important;
    /* color: #F4462C !important; */
}

.subscription-status-active {
    color: #199226 !important;     
}

.subscription-status-inactive {
    color: #F4462C !important;
}     

.total-month {
    font-weight: 500;
    line-height: 19.2px;
    letter-spacing: 0.005em;
    color: #2F2F2F;
}

.payment-date {
    font-size: 14px;
    line-height: 16.94px;
    color: var(--site-color);
}

.payment-desc {
    color: #8A8A8A;
    font-size: 14px;
    line-height: 16.94px;
}

.payment-type {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    color: #2F2F2F;
}

.cancle-subscription-btn {
    border-radius: 30px !important;
    background-color: var(--site-color);
}

.cancel-no-btn {
    border: 1px solid #C5C6C7;
}

.cancel-yes-btn {
    border: 1px solid #C5C6C7;
    background-color: var(--site-color);
}

.total-amount {
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    letter-spacing: 0.005em;
    color: #2F2F2F;
}

/* End Subscription  */

/* Start logout section */

.logout-btn {
    padding: 10px 20px;
    border-radius: 8px;
    background-color: var(--site-color);
    border: none;
}

/* End logout section */

/* END USER PROFILE SECTION */

/* START MEDIA QUERY */

@media (max-width: 576px) {

    /* .otp-section {
        display: flex !important;
        align-items: center !important;
    }

    .otp-section .card-body {
        padding-top: 0 !important;
    } */

    .frame-img {
        height: 40vh !important;
    }

    .subscribe {
        right: 2% !important;
    }

    .rating-section {
        text-align: center !important;
    }

    .client-review h3,
    .client-review span {
        text-align: center;
    }

    .related-content {
        padding-left: .5rem !important;
    }

}

@media (max-width: 768px) {

    .blog img {
        height: 40vh;
    }

    .blog-heading {
        margin: 1rem !important;
    }

    .blog-heading h4 {
        font-size: 1.25rem !important;
        line-height: 22px !important;
    }

    .price-header h4 {
        font-size: 1.5rem;
        line-height: 30px
    }

    .price-header p {
        font-size: 1rem;
    }

    .main-banner {
        min-height: auto !important;
    }

    .main .col-lg-7 {
        display: inline-block !important;
    }

    .owl-controls .owl-buttons .owl-prev {
        display: none !important;
    }

    .owl-controls .owl-buttons .owl-next {
        display: none !important;
    }

    .footer-content {
        text-align: left !important;
    }

    /* .banner-content {
        left: 0% !important;
    } */

    .diet-categories-section img {
        height: 250px !important;
    }

    .your-self {
        font-size: 22px !important;
    }

}

@media (max-width: 992px) {

    .exercise-video-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 50% !important;
    }

    .breadcrumbs {
        top: 0;
        bottom: auto !important;
        margin-top: 10px;
    }
    
    #navbarCollapse {
        background-color: #ffffff !important;
        padding-bottom: 10px !important;
    }

    #search-toggle {
        display: none !important;
    }

    .nav-site-name {
        font-size: 16px !important;
    }

    .side-bar {
        display: none;
    }

    .chart-title {
        display: none !important;
    }
}


@media (min-width: 1400px) {
    .auth-card {
        padding: 0 6.25rem !important;
    }
}

@media (min-width: 575.98px) and (max-width: 767.98px) {

    .frame-img {
        height: 50vh !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .frame-img {
        height: 50vh !important;
    }
}

@media (min-width: 991.98px) and (max-width: 1199.98px) {

    .fixed-card {
        max-width: 460px !important;
    }
}

@media (min-width: 1199.98px) and (max-width: 1399.98px) {

    .fixed-card {
        max-width: 550px !important;
    }
}

@media (min-width: 992px) {
    .head-sidebar {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .profile_image {
        margin-left: 1rem !important;   
    }

    .main-nav .profile_image {
        margin-left: 0rem !important;   
    }
}

@media (max-width: 1199px) {
    .font-h3 {
        font-size: 35px;
        line-height: 45px;
    }
}

@media (max-width: 767px) {
    .font-h3 {
        font-size: 30px;
        line-height: 40px;
    }
}

/* END MEDIA QUERY */

/* START AI CHAT  */
.chatbot-button {
    position: fixed;
    bottom: 20px;
    right: 19px;
    background-color: var(--site-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    font-size: 22px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-modal {
    position: fixed;
    bottom: 85px;
    right: 15px;
    width: 350px;
    height: 500px;
    max-height: 80vh;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 10000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.deletebot-modal {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 340px;
    max-height: 40vh;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chatbot-header {
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}

#chatbot-question {
    position: sticky;
    margin-top: 0;
    z-index: 9;
}

.continue-btn {
    height: 48px !important;
    padding: 14px 50px 14px 50px !important;
    background-color: var(--site-color) !important;
    line-height: 20px !important;
    width: auto !important;
}

.chat-card-bg {
    background-color: #fdf2ed;
    transition: all 0.3s ease;
    cursor: pointer;
}

.chat-card-bg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.active-card {
    background-color: var(--site-color) !important;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.active-card .chat-icon .chat-icon-path {
    fill: #fff;
    stroke: #fff;
}

.active-card .chat-icon .chat-icon-rect {
    stroke: #fff;
}

.active-card .chat-icon .chat-icon-pr {
    fill: #fff;
}

#chatbot-messages {
    flex: 1;
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none; 
}

.chatbot-step {
    overflow-y: scroll; 
    overflow-x: hidden;
    scrollbar-width: none;
}

.step-buttons {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    padding: 10px 0;
    z-index: 5;
    width: 100%;
    text-align: center;
}

#chat-container {
    flex: 1;
    padding: 10px 10px 0 10px;
    max-height: 380px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}

.chat-input-container {
    padding: 10px;
    background-color: #fff;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

.message-content {
    background-color: var(--site-color);
    max-width: 90%;
}

.loading-gif {
    height: 70px !important;
    width: 70px !important;
}

.user-message .message-content {
    background-color: #e8f4ff;
    text-align: left;
}

.chatbot-back {
    color: var(--site-color);
    border: 1px solid var(--site-color);
}

.chatbot-back:hover {
    color: var(--site-color);
}

.chatbot-continue, .send-btn{
    background-color: var(--site-color);
}

.chat-msg {
    white-space:pre-wrap !important;
}

/* PROGRESS BAR */

input[type="range"]::-webkit-slider-runnable-track {
    background: #fdf2ed;
    height: 0.5rem;
}

/* For Firefox */
input[type="range"]::-moz-range-track {
    background: #fdf2ed;
    height: 0.5rem;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--site-color);
    cursor: pointer;
}
  
.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--site-color);
    cursor: pointer;
}

#chat-container::-webkit-scrollbar {
    display: none;
}

.chatbot-step::-webkit-scrollbar {
    display: none; 
}
/* PROGRESS BAR */

@media (max-width: 576px) {
    .chatbot-modal {
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .deletebot-modal {
        max-width: 90%;
    }
    
    .message-content {
        max-width: 90%;
    }
    
    #chat-container {
        max-height: calc(100vh - 150px);
    }
}

/* END AI CHAT */

.exercise-slider img {
    aspect-ratio: 2/1.11;
    object-fit: cover;
}

.mm-error-img {
    width: 60%;
}

.mm-error-img-dark {
  display: none;
}

[dir="rtl"] .input-group .btn-group {
    right: auto;
    left: 0;
}
/* START FIT CHAT BOT */
[dir="rtl"] .chatbot-button {
  right: auto;
  left: 19px;
}

[dir="rtl"] .chatbot-modal {
  right: auto;
  left: 15px;
}

[dir="rtl"] .deletebot-modal {
  right: auto;
  left: 20px;
}

[dir="rtl"] .chatbot-back {
  direction: rtl;
}

[dir="rtl"] .user-message .message-content {
  text-align: right;
}

[dir="rtl"] .chat-msg {
  text-align: right;
}

[dir="rtl"] .chat-icon {
  transform: scaleX(-1); 
}
/* END FIT CHAT BOT */

.cookie-banner {
    z-index: 9999999;
}

/* RECIPE CARDS STYLES */
.recipes-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0;
}

.section-header {
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--site-color), #3498db);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.meal-plan-container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.meal-type-section {
    margin-bottom: 0;
    height: 100%;
}

.meal-type-section:last-child {
    margin-bottom: 0;
}

.meal-type-section:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 30px 0;
}

/* Responsive meal plan layout */
@media (max-width: 1199px) {
    .meal-plan-section .col-lg-6 {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .meal-plan-section .col-lg-6 {
        margin-bottom: 20px;
    }
    
    .meal-type-section {
        margin-bottom: 20px;
    }
}

.meal-type-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.meal-type-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.meal-type-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    backdrop-filter: blur(10px);
}

.meal-type-details h3 {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.meal-type-time {
    color: rgba(255, 255, 255, 0.9);
    margin: 5px 0 0 0;
    font-size: 0.95rem;
}

.recipe-count-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Override Bootstrap row for CSS Grid layout */
.recipes-grid .row {
    display: contents !important;
    justify-content: unset !important;
}

/* Override Bootstrap grid classes for recipe cards */
.recipes-grid .col-md-6.col-lg-4 {
    flex: none !important;
    width: auto !important;
}

@media (max-width: 991px) {
    .recipes-grid .col-md-6.col-lg-4 {
        width: auto !important;
    }
}

@media (max-width: 575px) {
    .recipes-grid .col-md-6.col-lg-4 {
        width: auto !important;
    }
}

.recipe-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--secondary-background-color);
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.recipe-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-8px) scale(1.02);
    border-color: var(--site-color);
}

.recipe-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.recipe-image {
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.recipe-card:hover .recipe-image {
    transform: scale(1.1);
}

.premium-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #333;
    padding: 8px 12px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.recipe-content {
    padding: 25px;
}

.recipe-title {
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.recipe-meta {
    font-size: 14px;
    color: var(--accent-color);
}

.recipe-meta .calories {
    color: #e74c3c;
    font-weight: 500;
}

.recipe-meta .cooking-time {
    color: #7f8c8d;
}

.recipe-description {
    line-height: 1.4;
    color: var(--accent-color);
}

.recipe-actions .btn {
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--site-color), #3498db);
    border: none;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recipe-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #3498db, var(--site-color));
}

.modified-ingredients {
    padding: 4px 8px;
    background-color: rgba(255, 193, 7, 0.1);
    border-radius: 4px;
    border-left: 3px solid #ffc107;
}

.modified-ingredients small {
    font-weight: 500;
}

.no-recipes-message {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 15px;
    border: 2px dashed rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .meal-plan-container {
        padding: 25px;
    }
    
    .meal-type-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .meal-type-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .recipe-image-container {
        height: 180px;
    }
    
    .recipe-title {
        font-size: 1rem;
    }
    
    .recipe-meta {
        font-size: 13px;
    }
    
    .recipe-actions .btn {
        font-size: 12px;
        padding: 10px 20px;
    }
    
    /* Mobile Premium Badge */
    .premium-badge {
        top: 6px;
        right: 6px;
        padding: 4px 8px;
        font-size: 10px;
        border-radius: 15px;
    }
    
    .premium-badge i {
        font-size: 8px;
    }
    
    .premium-badge span {
        font-size: 9px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .meal-plan-container {
        padding: 20px;
        border-radius: 15px;
    }
    
    .meal-type-header {
        padding: 20px;
    }
    
    .meal-type-details h3 {
        font-size: 1.5rem;
    }
    
    .recipe-content {
        padding: 20px;
    }
    
    .recipe-image-container {
        height: 160px;
    }
    
    /* Small Mobile Premium Badge */
    .premium-badge {
        top: 4px;
        right: 4px;
        padding: 3px 6px;
        font-size: 9px;
        border-radius: 12px;
    }
    
    .premium-badge i {
        font-size: 7px;
    }
    
    .premium-badge span {
        font-size: 8px;
    }
}

/* Mobile-First Diet Details Page Styles */
.mobile-diet-container {
    background: var(--secondary-background-color);
    min-height: 100vh;
    padding-bottom: 80px;
}

/* Top Navigation Bar */
.mobile-top-bar {
    background: white;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 0;
    position: sticky;
    top: 0;
}

.breadcrumb-nav {
    font-size: 14px;
    color: #6c757d;
}

.breadcrumb-nav a {
    color: var(--site-color);
    text-decoration: none;
}

.breadcrumb-nav .separator {
    margin: 0 8px;
    color: #dee2e6;
}

.breadcrumb-nav .current {
    color: #495057;
    font-weight: 500;
}

.top-actions .btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    border-color: var(--site-color);
    color: var(--site-color);
}

.top-actions .btn:hover {
    background-color: var(--site-color);
    color: white;
}

/* Diet Summary Card */
.diet-summary-card {
    background: var(--card-bg-color, var(--bs-white, white));
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Diet Image */
.diet-image-container {
    text-align: center;
}

.diet-image {
    width: 100%;
    max-width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Desktop - Bigger image for left side layout */
@media (min-width: 768px) {
    .diet-left-section .diet-image {
        max-width: 100%;
        height: 300px;
        object-fit: cover;
    }
    
    .diet-title {
        font-size: 1.75rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }
    
    .diet-description-right {
        background: var(--card-bg-color, var(--bs-gray-100, #f8f9fa));
        padding: 20px;
        border-radius: 12px;
        border-left: 4px solid var(--site-color);
        margin-bottom: 20px;
    }
    
    .diet-description-right .description-text {
        color: var(--text-color, var(--bs-gray-700, #495057));
    }
}

/* Diet Description Right - General Styling */
.diet-description-right {
    background: var(--card-bg-color, var(--bs-gray-100, #f8f9fa));
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--site-color);
    margin-bottom: 20px;
}

.diet-description-right .description-text {
    color: var(--text-color, var(--bs-gray-700, #495057));
}

.diet-description-below-image {
    margin-top: 15px;
    padding: 15px;
    background: var(--card-bg-color, var(--bs-gray-100, #f8f9fa));
    border-radius: 8px;
    border-left: 4px solid var(--site-color);
}

.diet-description-below-image .description-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color, var(--bs-gray-700, #495057));
    margin: 0;
}

.diet-title {
    font-size: 20px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.btn-link {
    color: #6c757d;
    text-decoration: none;
}

/* Enhanced Day Summary Section */
.enhanced-day-summary {
    background: linear-gradient(135deg, var(--card-bg-color, #ffffff) 0%, var(--secondary-background-color, #f8f9fa) 100%);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color, #e9ecef);
    position: relative;
    overflow: hidden;
}

.enhanced-day-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f);
    border-radius: 20px 20px 0 0;
}

/* Calories Section */
.calories-section {
    text-align: center;
    margin-bottom: 30px;
}

.calorie-circle-enhanced {
    position: relative;
    display: inline-block;
}

.progress-ring-container {
    position: relative;
    display: inline-block;
}

.progress-ring-svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.progress-circle {
    transition: stroke-dashoffset 1s ease-in-out;
    stroke-linecap: round;
}

.calorie-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.calorie-icon {
    font-size: 20px;
    color: #ff6b6b;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.calorie-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--text-color, #212529);
    line-height: 1;
    margin-bottom: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calorie-unit {
    display: block;
    font-size: 14px;
    color: var(--text-muted-color, #6c757d);
    font-weight: 600;
    margin-bottom: 5px;
}

.calorie-percentage {
    font-size: 11px;
    color: var(--text-muted-color, #6c757d);
    font-weight: 500;
}

/* Macros Section */
.macros-section {
    margin-top: 20px;
}

.macros-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.macro-card {
    background: var(--card-bg-color, #ffffff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color, #e9ecef);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.macro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--macro-color, #007bff);
    transition: all 0.3s ease;
}

.macro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.macro-card:hover::before {
    width: 6px;
}

.macro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--macro-color, #007bff)20, var(--macro-color, #007bff)10);
    color: var(--macro-color, #007bff);
    font-size: 18px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.macro-card:hover .macro-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.macro-info {
    margin-bottom: 15px;
}

.macro-label {
    font-size: 13px;
    color: var(--text-muted-color, #6c757d);
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.macro-value {
    font-size: 20px;
    color: var(--text-color, #212529);
    font-weight: 700;
    line-height: 1;
}

.macro-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.macro-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--border-color, #e9ecef);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.macro-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-in-out;
    position: relative;
    overflow: hidden;
}

.macro-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.macro-percentage {
    min-width: 35px;
    text-align: right;
}

.macro-percentage-text {
    font-size: 12px;
    color: var(--text-muted-color, #6c757d);
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .enhanced-day-summary {
        padding: 20px;
        margin: 10px 0;
    }
    
    .calorie-number {
        font-size: 24px;
    }
    
    .macro-card {
        padding: 15px;
    }
    
    .macro-value {
        font-size: 18px;
    }
    
    /* Mobile: Stack macros vertically on very small screens */
    .macro-progress .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .macro-item {
        margin-bottom: 10px;
        padding: 0;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 576px) {
    .calorie-progress-section {
        margin-top: 10px;
    }
    
    .calorie-circle {
        margin-bottom: 0;
    }
    
    .calorie-bottom {
        margin-top: 6px;
        gap: 3px;
    }
    
    .calorie-icon {
        font-size: 16px;
    }
    
    .calorie-number {
        font-size: 16px;
    }
    
    .calorie-unit {
        font-size: 12px;
    }
    
    /* Smaller calorie circle for mobile */
    .calorie-circle svg {
        width: 60px;
        height: 60px;
    }
    
    .calorie-circle svg circle {
        cx: 30;
        cy: 30;
        r: 25;
    }
    
    .macro-progress {
        padding-left: 0;
        margin-top: 0;
    }
    
    .macro-item {
        margin-bottom: 6px;
        padding: 0;
    }
    
    .macro-label {
        font-size: 9px;
        margin-bottom: 2px;
        height: 10px;
    }
    
    .macro-value {
        font-size: 9px;
        font-weight: 600;
    }
    
    .macro-item .progress {
        height: 6px;
        margin-bottom: 2px;
        width: 100%;
        display: block;
        overflow: hidden;
        background: var(--bs-gray-200, #e9ecef);
    }
    
    .macro-item .progress-bar {
        min-width: 4px;
        transition: width 0.3s ease-in-out;
    }
    
    /* Reduce overall spacing in diet summary card */
    .diet-summary-card {
        padding: 15px;
        margin: 10px 0;
    }
    
    /* Compact row spacing */
    .row.align-items-center {
        margin: 0;
    }
    
    .col-12.text-center.mb-4 {
        margin-bottom: 12px !important;
    }
    
    /* Side-by-side mobile layout */
    .calorie-progress-section .col-4 {
        flex: 0 0 35%;
        max-width: 35%;
    }
    
    .calorie-progress-section .col-8 {
        flex: 0 0 65%;
        max-width: 65%;
        padding-top: 10px; /* Slightly less padding for mobile */
    }
    
    /* Smaller calorie circle for mobile */
    .calorie-circle svg {
        width: 60px;
        height: 60px;
    }
    
    .calorie-circle svg circle {
        cx: 30;
        cy: 30;
        r: 25;
    }
}



/* Calorie Circle */
.calorie-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -65px;
    display: flex;
    justify-content: left;
}

.progress-ring {
    position: relative;
    display: inline-block;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

#calorie-progress-circle {
    transition: stroke-dashoffset 1s ease-in-out;
}

.calorie-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.calorie-number {
    font-size: 18px;
    font-weight: 700;
    color: #212529;
    line-height: 1;
    margin: 0;
}

/* Calorie Bottom - Icon and unit grouped */
.calorie-bottom {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calorie-icon {
    font-size: 18px;
    color: #ff6b6b;
}

.calorie-unit {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

/* Side-by-side layout optimization */
.calorie-progress-section {
    align-items: center;
    display: flex;
    justify-content: space-around;
}

.calorie-progress-section .col-4,
.calorie-progress-section .col-8 {
    display: flex;
    align-items: center;
}

.calorie-progress-section .col-4 {
    justify-content: center;
}

.calorie-progress-section .col-8 {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 15px; /* Align with calorie circle center */
}

/* Macro grid optimization */
.macro-progress {
    padding-left: 0;
    height: 150px;
    display: flex;
}

.macro-progress .row {
    align-items: stretch;
}

.macro-progress .col-6 {
    padding-left: 5px;
    padding-right: 5px;
}

/* Macro Progress */
.macro-progress {
    padding-left: 0;
}

.macro-item {
    margin-bottom: 12px;
    padding: 0;
    width: 100%;
}

.macro-item:last-child {
    margin-bottom: 0;
}

.macro-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
    font-weight: 500;
    height: 20px;
    display: flex;
    align-items: center;
}

.macro-item .progress {
    height: 8px;
    border-radius: 4px;
    background: var(--bs-gray-200, #e9ecef);
    margin-bottom: 5px;
    width: 100%;
    display: block;
    overflow: hidden;
}

.macro-item .progress-bar {
    border-radius: 4px;
    min-width: 8px; /* Ensure color is visible even at 0% */
    transition: width 0.3s ease-in-out;
}

.macro-value {
    font-size: 12px;
    color: #212529;
    font-weight: 600;
}

/* Meal Plan Section */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 20px 0 15px 0;
    text-align: center;
}

.meal-type-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Compact Meal Type Header */
.meal-type-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f3f4;
}

.meal-type-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.meal-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--site-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.meal-type-details {
    flex: 1;
    text-align: left;
}

.meal-type-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 4px 0;
    text-align: left !important;
    display: block;
}

.meal-type-time {
    color: #6c757d;
    font-size: 12px;
    margin: 0;
    text-align: left !important;
    display: block;
}

.meal-type-count .badge {
    background: var(--site-color);
    color: white;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 12px;
}

/* Option Tabs */
.option-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.option-tabs::-webkit-scrollbar {
    display: none;
}

.option-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid #e9ecef;
    background: #f8f9fa;
    color: #6c757d;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.option-tab:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.option-tab.active {
    background: var(--site-color);
    color: white;
    border-color: var(--site-color);
}

/* Recipe Cards Container */
.recipe-cards-container {
    position: relative;
}

/* Recipe Cards */
.recipe-card {
    display: none;
    background: var(--secondary-background-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.recipe-card.active {
    display: block;
}

.recipe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.recipe-image {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.recipe-image img {
    width: 100%;
    object-fit: cover;
}

.premium-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #333;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    min-width: fit-content;
    z-index: 10;
}

.premium-badge i {
    font-size: 10px;
    color: #333;
}

.premium-badge span {
    font-size: 11px;
    font-weight: 600;
    color: #333;
}

.recipe-content {
    padding: 15px;
}

.recipe-title {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 8px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-category {
    font-size: 11px;
    color: #6c757d;
    background: #e9ecef;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.recipe-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.calories-info {
    font-size: 12px;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 4px;
}

.calories-info i {
    color: #dc3545;
}

.calories-info small {
    color: #6c757d;
    font-size: 11px;
    font-weight: 500;
}

.recipe-arrow {
    color: var(--site-color);
    font-size: 12px;
}

.modified-indicator {
    margin-top: 6px;
}

.modified-indicator small {
    font-size: 10px;
    color: #ffc107;
}

/* Diet Description Section */
.diet-description-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.diet-description-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.description-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.description-title i {
    color: var(--site-color);
}

.description-text {
    color: #495057;
    line-height: 1.6;
    font-size: 14px;
    flex: 1;
}

/* Diet Information Section */
.diet-info-section {
    padding: 0 15px;
    margin-top: 20px;
}

.info-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
}

.info-title i {
    color: var(--site-color);
}

.info-content {
    color: #495057;
    line-height: 1.6;
    font-size: 14px;
}

/* Recipe Details Page */
.recipe-details-container {
    padding: 0;
    background: #f8f9fa;
    min-height: 100vh;
}

.recipe-summary-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recipe-detail-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recipe-title {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 15px;
    line-height: 1.2;
}

.recipe-category-badge {
    margin-bottom: 15px;
}

.recipe-category-badge .badge {
    background: var(--site-color);
    color: white;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 20px;
}

.recipe-description {
    margin-bottom: 20px;
}

.recipe-description p {
    color: #495057;
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
}

.recipe-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid var(--site-color);
}

.meta-item i {
    color: var(--site-color);
    font-size: 16px;
    width: 20px;
}

.meta-item span {
    font-size: 14px;
    font-weight: 500;
    color: #212529;
}

.nutrition-summary {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.nutrition-summary h5 {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 15px;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.nutrition-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border-left: 3px solid var(--site-color);
}

.nutrition-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.nutrition-value {
    font-size: 12px;
    color: #212529;
    font-weight: 600;
}

.recipe-content-section {
    padding: 0 15px;
    margin-bottom: 30px;
}

.recipe-content-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.content-title {
    font-size: 20px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.content-title i {
    color: var(--site-color);
}

.content-body {
    color: #495057;
    line-height: 1.7;
    font-size: 15px;
}

.content-body p {
    margin-bottom: 15px;
}

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

/* Responsive Design */
@media (min-width: 768px) {
    .mobile-diet-container {
        max-width: 768px;
        margin: 0 auto;
    }
    
    .diet-summary-card {
        margin: 20px 0;
    }
    
    .diet-info-section {
        padding: 0 20px;
    }
    
    .calorie-number {
        font-size: 16;
    }
    
    .diet-title {
        font-size: 24px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .recipe-card {
        flex: 0 0 320px;
    }
    
    .recipe-image {
        height: 180px;
    }
}

@media (min-width: 992px) {
    .mobile-diet-container {
        max-width: 900px;
    }
    
    .recipe-card {
        flex: 0 0 350px;
    }
    
    .recipe-image {
        height: 200px;
    }
    
    .recipe-title {
        font-size: 16px;
    }
}

/* Animation and Interactions */
.meal-type-section {
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recipe-card:active {
    transform: scale(0.98);
}

/* Scroll Indicators */
.recipe-scroll-container {
    position: relative;
}

.recipe-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.recipe-scroll-container.has-more::after {
    opacity: 1;
}

/* Loading States */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .mobile-diet-container {
        background: #1a1a1a;
    }
    
    .diet-summary-card,
    .meal-type-card,
    .info-card {
        background: #2d2d2d;
        color: #ffffff;
    }
    
    .diet-title,
    .section-title,
    .meal-type-title,
    .recipe-title {
        color: #ffffff;
    }
    
    .recipe-option-card {
        background: #3d3d3d;
        border-color: #4d4d4d;
    }
    
    .recipe-option-card:hover {
        background: #4d4d4d;
    }
    
    .breadcrumb-nav {
        color: #b0b0b0;
    }
    
    .breadcrumb-nav .current {
        color: #ffffff;
    }
}

/* Theme Switching Support */
body.dark-mode .recipe-details-container {
    background: #1a1a1a;
}

body.dark-mode .recipe-hero-immersive {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
}

body.dark-mode .recipe-main-content {
    background: #2d2d2d;
    color: #ffffff;
}

body.dark-mode .recipe-section-modern {
    background: #3d3d3d;
    border: 1px solid #4d4d4d;
    color: #ffffff;
}

body.dark-mode .section-title-modern {
    color: #ffffff;
}

body.dark-mode .ingredients-list-modern,
body.dark-mode .instructions-list-modern {
    color: #e0e0e0;
}

body.dark-mode .breadcrumb-link {
    color: #b0b0b0;
}

body.dark-mode .breadcrumb-link:hover {
    color: #ffffff;
}

body.dark-mode .breadcrumb-current {
    color: #ffffff;
}

body.dark-mode .recipe-title-hero {
    color: #ffffff;
}

body.dark-mode .recipe-description-elegant {
    color: #e0e0e0;
}

body.dark-mode .meta-tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.dark-mode .meta-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .recipe-tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    margin: 6px 0px;
}

body.dark-mode .recipe-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .nutrition-tag {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

body.dark-mode .nutrition-tag:hover {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-primary);
}

body.dark-mode .servings-badge {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.dark-mode .servings-badge:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .stat-item {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    margin: 3px 0px;
}

body.dark-mode .stat-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .stat-value,
body.dark-mode .stat-label {
    color: #ffffff;
}

body.dark-mode .tags-section-title {
    color: #ffffff;
}

body.dark-mode .image-modal {
    background-color: rgba(0, 0, 0, 0.95);
}

body.dark-mode .image-modal-close {
    color: #ffffff;
}

body.dark-mode .image-modal-close:hover {
    color: var(--site-color);
}

/* Additional Dark Mode Enhancements */
body.dark-mode .recipe-hero-image-wrapper {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .image-overlay {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

body.dark-mode .premium-badge-floating {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #2c3e50;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

body.dark-mode .decoration-circle {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .decoration-line {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

body.dark-mode .section-decoration {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

body.dark-mode .section-icon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--site-color);
}

body.dark-mode .section-icon::before {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .nutrition-progress-modern {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .nutrition-progress-modern .progress-bar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Ingredients and Instructions Bullet Points */
.ingredients-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.instructions-numbered-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredient-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ingredient-item:last-child {
    border-bottom: none;
}

.ingredient-item:hover {
    background: rgba(var(--site-color), 0.05);
    padding-left: 8px;
    border-radius: 8px;
}

.ingredient-item i {
    color: var(--site-color);
    font-size: 0.6rem;
    margin-top: 6px;
    flex-shrink: 0;
}

.ingredient-item span {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

.instructions-numbered-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
}

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    counter-increment: step-counter;
}

.instruction-item:last-child {
    border-bottom: none;
}

.instruction-item:hover {
    background: rgba(var(--site-color), 0.05);
    padding-left: 12px;
    border-radius: 8px;
}

.step-number {
    background: var(--site-color);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-text {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    flex: 1;
}

/* Dark Mode Support for Lists */
body.dark-mode .ingredient-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .ingredient-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .ingredient-item span {
    color: #e0e0e0;
}

body.dark-mode .instruction-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .instruction-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .step-text {
    color: #e0e0e0;
}

/* Recipe Listing Page Styles */

.recipe-listing-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Hero Section */
.recipe-hero-section,
.page-hero-section {
    background: linear-gradient(135deg, var(--site-color) 0%, var(--hero-gradient-mid, #1f8a5f) 50%, var(--hero-gradient-end, #156b47) 100%);
    position: relative;
    overflow: visible;
    padding: 4rem 0;
}

.recipe-hero-section::before,
.page-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hero-grain-pattern, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'));
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

/* Search Container */
.search-container {
    max-width: 500px;
    margin: 0 auto 1.5rem;
    position: relative;
    overflow: visible;
}

.search-form {
    position: relative;
    z-index: 1;
}

.search-input-group {
    display: flex;
    align-items: center;
    background: var(--search-bg-color, rgba(255, 255, 255, 0.95));
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.search-input {
    flex: 1;
    border: none;
    padding: 12px 18px;
    font-size: 0.95rem;
    background: transparent;
    outline: none;
    transition: all 0.3s ease;
    color: var(--text-color, #333333);
}

.search-input:focus {
    outline: none;
    box-shadow: none;
}

.search-input-group:focus-within {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 2px var(--site-color);
    transform: translateY(-1px);
}

.search-icon-btn {
    background: none;
    border: none;
    padding: 12px 18px;
    color: var(--text-muted-color, #6c757d);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon-btn:hover {
    background: var(--site-color, #d66a3a);
    color: white;
}

.search-icon {
    font-size: 0.9rem;
}

.search-input::placeholder {
    color: var(--text-muted-color, #6c757d);
    opacity: 0.8;
}


/* Results Count */
.results-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.count-number {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Main Content Layout */
.recipe-listing-container {
    display: flex;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
    position: relative;
}

/* Filters Sidebar */
.filters-sidebar {
    width: 25%;
    flex-shrink: 0;
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
}

/* Desktop height optimization */
@media (min-width: 768px) {
    .filters-sidebar {
        max-height: calc(100vh - 2rem);
        height: calc(100vh - 2rem);
        padding: 0.75rem;
    }
    
    .filters-sidebar form {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 1rem;
        min-height: 0;
    }
    
    .filters-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    .filters-title {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    
    .filters-subtitle {
        font-size: 0.8rem;
    }
    
    .filter-group {
        margin-bottom: 0.75rem;
    }
    
    .filter-label {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }
    
    .filter-select {
        padding: 0.5rem;
        font-size: 0.8rem;
        border-radius: 6px;
        padding-right: 1.5rem;
    }
    
    .tags-section {
        margin-bottom: 0.75rem;
    }
    
    .tags-search-container {
        margin-bottom: 0.5rem;
    }
    
    .tags-search-input {
        padding: 0.5rem 2rem 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .tags-count {
        font-size: 0.7rem;
        margin-top: 0.25rem;
        padding: 0.2rem;
    }
    
    .special-filters {
        margin-bottom: 0.75rem;
    }
    
    .checkbox-group {
        gap: 0.25rem;
    }
    
    .checkbox-label {
        font-size: 0.8rem;
    }
    
    .tags-grid {
        max-height: 120px;
        gap: 0.25rem;
    }
    
    .tag-item {
        gap: 0.25rem;
    }
    
    .clear-filters-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        border-radius: 6px;
    }
    
    /* Custom scrollbar for desktop */
    .filters-sidebar::-webkit-scrollbar {
        width: 4px;
    }
    
    .filters-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .filters-sidebar::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 2px;
    }
    
    .filters-sidebar::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary);
    }
}



.filters-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.filters-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.filters-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Main Content Area */
.recipes-main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.recipes-grid {
    flex: 1;
}

.filters-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Mobile Filter Toggle */
.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--site-color);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-toggle-btn:hover {
    background: #1f8a5f;
}

.active-filters-count {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Filters Panel */
.filters-panel {
    flex: 1;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.filters-form {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-label {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: block;
}

.filter-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    background: white;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.filter-select:focus {
    outline: none;
    border-color: var(--site-color);
    box-shadow: 0 0 0 3px rgba(45, 167, 113, 0.1);
}

/* Tags Section */
.tags-section {
    margin-bottom: 1.5rem;
}

/* Tags Search Container */
.tags-search-container {
    position: relative;
    margin-bottom: 0.75rem;
}

.tags-search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.tags-search-input:focus {
    outline: none;
    border-color: var(--site-color);
    box-shadow: 0 0 0 3px rgba(45, 167, 113, 0.1);
}

.tags-search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 0.9rem;
    pointer-events: none;
}

/* Tags Count */
.tags-count {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.25rem;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Hidden Tag Items */
.tag-item.hidden {
    display: none;
}

/* Dark Mode Support */
body.dark-mode .tags-search-input {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .tags-search-input:focus {
    border-color: var(--site-color);
    box-shadow: 0 0 0 3px rgba(45, 167, 113, 0.2);
}

body.dark-mode .tags-search-icon {
    color: #a0aec0;
}

body.dark-mode .tags-count {
    background: #4a5568;
    color: #a0aec0;
}

.tags-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.tags-grid::-webkit-scrollbar {
    width: 4px;
}

.tags-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.tags-grid::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.tag-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-label {
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.checkbox-label:hover {
    color: var(--site-color);
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--site-color);
}

.special-filters {
    margin-bottom: 1.5rem;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


/* Filter buttons container - simple positioning */
.filter-buttons-container {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem 0;
}

/* Hide original filter buttons on mobile by default */
@media (max-width: 767px) {
    
    /* Hide mobile filter action buttons by default - shown by JavaScript */
    .mobile-filter-action-buttons {
        display: none;
    }
}

/* Desktop specific button positioning */
@media (min-width: 768px) {
    .filter-buttons-container {
        margin-top: 0;
        padding: 1rem 0 0 0;
    }
    
    /* Hide mobile filter action buttons on desktop */
    .mobile-filter-action-buttons {
        display: none;
    }
}

.apply-filters-btn {
    flex: 1;
    background: var(--site-color, #007bff);
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50px;
}

.apply-filters-btn:hover {
    
    transform: translateY(-1px);
}

.filter-buttons-container .clear-filters-btn {
    flex: 1;
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-buttons-container .clear-filters-btn:hover {
    background: var(--text-secondary);
    transform: translateY(-1px);
}

.tag-checkbox {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.8rem;
}

.tag-checkbox input[type="checkbox"] {
    margin: 0;
}

.tag-label {
    color: var(--text-secondary);
}

/* Checkbox Filters */
.checkbox-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.checkbox-item input[type="checkbox"] {
    margin: 0;
}

.checkbox-label {
    color: var(--text-secondary);
}

/* Filter Actions */
.filter-actions {
    margin-left: auto;
}

.clear-filters-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-filters-btn:hover {
    background: var(--text-secondary);
}

/* Sort Section */
.sort-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sort-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.sort-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-color);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    min-width: 150px;
}

.sort-select:focus {
    outline: none;
    border-color: var(--site-color);
    box-shadow: 0 0 0 3px rgba(236, 126, 74, 0.1);
}

/* Recipes Section */
.recipes-section {
    padding: 40px 0;
}

/* Recipe Listing Grid */
.recipes-section .recipes-grid,
.recipes-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    min-height: 200px !important;
    /* Override any flexbox properties */
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    /* Ensure grid items are properly sized */
    grid-auto-rows: minmax(200px, auto) !important;
}

/* Recipe Card for Listing Page */
.recipes-grid .recipe-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
    min-height: 100px;
    /* Ensure proper grid behavior */
    grid-column: auto;
    grid-row: auto;
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.recipe-image-container {
    position: relative;
    overflow: hidden;
}

.recipe-image {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-image {
    transform: scale(1.05);
}

/* Badges */
.premium-badge,
.featured-badge {
    position: absolute;
    top: 10px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 2;
}

.premium-badge {
    right: 10px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #856404;
}

.featured-badge {
    left: 10px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
}

/* Recipe Content */
.recipe-content {
    padding: 1rem;
}

.recipe-meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.recipe-category,
.recipe-diet-type {
    background: rgba(var(--site-color), 0.1);
    color: var(--site-color);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.recipe-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}



.recipe-description {
    color: #6c757d;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

/* Recipe Stats */
.recipe-stats {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
    flex-wrap: wrap;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
    flex-shrink: 0;
}

.stat-item i {
    color: var(--site-color);
    font-size: 0.8rem;
}



/* Recipe Tags */
.recipe-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.recipe-tag {
    background: #f8f9fa;
    color: #495057;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.more-tags {
    background: var(--site-color);
    color: white;
}

/* No Recipes Found */
.no-recipes-found {
    text-align: center;
    padding: 4rem 2rem;
    grid-column: 1 / -1;
}

.no-recipes-icon {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.no-recipes-found h3 {
    color: #495057;
    margin-bottom: 0.5rem;
}

.no-recipes-found p {
    color: #6c757d;
    margin-bottom: 2rem;
}

/* Load More */
.load-more-container {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

/* Infinite Scroll Loader */
.infinite-scroll-loader {
    text-align: center;
    padding: 2rem 0;
    margin: 1rem 0;
}

.loader-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.loader-content i {
    font-size: 2rem;
    color: var(--site-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dark Mode Support for Infinite Scroll Loader */
body.dark-mode .infinite-scroll-loader {
    color: #a0aec0;
}

body.dark-mode .loader-content {
    color: #a0aec0;
}

/* End of Recipes Message */
.end-of-recipes {
    text-align: center;
    padding: 3rem 1rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    border: 2px dashed #dee2e6;
}

.end-message-content {
    max-width: 500px;
    margin: 0 auto;
}

.end-icon {
    margin-bottom: 1.5rem;
}

.end-icon i {
    font-size: 3rem;
    color: var(--site-color);
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.end-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.end-subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.end-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.end-action-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.end-action-btn.primary {
    background: var(--site-color);
    color: white;
}

.end-action-btn.primary:hover {
    background: #1f8a5f;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(45, 167, 113, 0.3);
}

.end-action-btn.secondary {
    background: #6c757d;
    color: white;
}

.end-action-btn.secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

/* Dark Mode Support for End of Recipes */
body.dark-mode .end-of-recipes {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border-color: #4a5568;
}

body.dark-mode .end-title {
    color: #ffffff;
}

body.dark-mode .end-subtitle {
    color: #a0aec0;
}

.load-more-btn {
    background: var(--site-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.load-more-btn:hover {
    background: #1f8a5f;
    transform: translateY(-2px);
}

.btn-loader {
    display: none;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--site-color);
    font-size: 1.1rem;
}

.loading-spinner i {
    font-size: 3rem;
    animation: spin 1s linear infinite;
}

/* Loading states for recipes */
.loading-recipes {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-size: 1.1rem;
}

.error-loading {
    text-align: center;
    padding: 2rem;
    color: #dc3545;
    font-size: 1.1rem;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .filters-panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        border-top: 1px solid #e9ecef;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .filters-panel.show {
        display: block;
    }

    .filters-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        min-width: auto;
    }

    .tags-filter-container {
        max-width: none;
    }

    .filter-actions {
        margin-left: 0;
        margin-top: 1rem;
    }

    .sort-section {
        margin-top: 1rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 991px) {
    .recipe-listing-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .filters-sidebar {
        width: 100%;
        position: static;
        order: 2;
    }

    .recipes-main-content {
        order: 1;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .recipe-listing-container {
        flex-direction: column;
        gap: 1rem;
    }

    .filters-sidebar {
        width: 100%;
        position: static;
        order: 2;
    }

    .recipes-main-content {
        order: 1;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .search-container {
        margin: 0 auto 1rem;
    }
    
    .search-input-group {
        border-radius: 12px;
    }

    .search-input {
        border-radius: 12px 0 0 12px;
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    .search-icon-btn {
        border-radius: 0 12px 12px 0;
        padding: 10px 15px;
    }

    .search-icon {
        font-size: 0.85rem;
    }
    
    .results-count {
        font-size: 0.85rem;
    }
    
    .count-number {
        font-size: 1rem;
    }

    .recipe-listing-container {
        padding: 1rem;
        display: block !important;
    }
    
    .recipes-main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .filters-sidebar {
        padding: 1rem;
    }

    /* Force single column layout on mobile */
    .recipes-section .recipes-grid,
    .recipes-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .recipe-stats {
        justify-content: space-between;
    }
}

/* Additional mobile breakpoint for very small screens */
@media (max-width: 480px) {
    /* Force single column layout on very small screens */
    .recipes-section .recipes-grid,
    .recipes-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .recipe-card {
        margin-bottom: 1rem !important;
    }
    
    /* Optimize recipe stats for very small screens */
    .recipe-stats {
        gap: 0.3rem !important;
    }
    
    .stat-item {
        font-size: 0.6rem;
        gap: 0.15rem;
        padding: 5px 5px;
        margin: 0px 0px;
    }
    
    .stat-item i {
        font-size: 0.65rem;
    }

    .meta-tag{
        gap: 5px;
        padding: 5px 7px;
        font-size: 0.6rem;
        letter-spacing: 0px;
    }
    .meta-tag i {
        font-size: .7rem;
    }

}

/* Mobile viewport handling for dynamic URL bar */
@media (max-width: 767px) {
    /* Use fixed height for mobile to avoid viewport issues */
    .filters-sidebar {
        max-height: 100vh;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    /* Fallback for browsers that support dvh */
    @supports (height: 100dvh) {
        .filters-sidebar {
            max-height: 100dvh;
            height: 100dvh;
        }
    }
    
    /* Filter content area for mobile */
    .filters-sidebar form {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 2rem;
        min-height: 0;
    }
    
    /* Mobile Filter Action Buttons - Show when filter panel is open */
    
}

/* Ensure mobile layout works on all mobile devices */
@media (max-width: 767px) {
    /* Override any potential Bootstrap or other framework styles */
    .recipes-section .recipes-grid,
    .recipes-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 1rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .recipes-section .recipes-grid .recipe-card,
    .recipes-grid .recipe-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    /* Optimize card content for mobile */
    .recipe-content {
        padding: 0.75rem !important;
    }
    
    .recipe-image-container {
        height: 160px;
    }
    
    .recipe-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .recipe-description {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .recipe-stats {
        gap: 0.4rem !important;
        justify-content: flex-start !important;
    }
    
    .stat-item {
        font-size: 0.65rem;
        gap: 0.2rem;
        padding: 5px 5px;
        margin: 0px 0px;
    }
    
    .stat-item i {
        font-size: 0.7rem;
    }
    

    
    /* Show mobile sticky buttons */
    .mobile-sticky-buttons {
        display: flex !important;
    }
    
    /* Hide desktop filters and sort on mobile */
    .filters-sidebar {
        display: none !important;
    }
    
    .sort-section {
        display: none !important;
    }
    
    /* Show mobile panels when active */
    .filters-sidebar.show-mobile {
        display: flex !important;
        transform: translateX(0) !important;
        animation: slideInFromLeft 0.3s ease-out;
        width: 100% !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: 100vh !important;
        z-index: 1050 !important;
        border-radius: 0 !important;
    }
    
    .sort-section.show-mobile {
        display: block !important;
        transform: translateX(0) !important;
        animation: slideInFromLeft 0.3s ease-out;
    }
    
    /* Hide mobile panels when not active */
    .filters-sidebar:not(.show-mobile) {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out;
    }
    
    .sort-section:not(.show-mobile) {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out;
    }
    
    /* Mobile panel animations */
    @keyframes slideInFromLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutToLeft {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(-100%);
            opacity: 0;
        }
    }
    
    /* Show mobile panel close buttons on mobile */
    .mobile-panel-close {
        display: block !important;
    }
}

/* Mobile Sticky Buttons Container */
.mobile-sticky-buttons {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    gap: 12px;
    align-items: center;
}

/* Mobile Filter Action Buttons Container */
.mobile-filter-action-buttons {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    gap: 12px;
    align-items: center;
    width: 90%;
    max-width: 400px;
    justify-content: center;
}

/* Mobile Filter Action Buttons Styling */
.mobile-filter-action-buttons .mobile-sticky-button.apply-filters-btn {
    background: var(--site-color);
    box-shadow: 0 4px 20px rgba(45, 167, 113, 0.3);
    border-radius: 50px;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 115px;
}

.mobile-filter-action-buttons .mobile-sticky-button.clear-filters-btn {
    background: var(--accent-color);
    box-shadow: 0 4px 20px rgba(108, 117, 125, 0.3);
    border-radius: 50px;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 115px;
}

.mobile-filter-action-buttons .mobile-sticky-button.apply-filters-btn:hover {
    
    box-shadow: 0 6px 25px rgba(45, 167, 113, 0.4);
    transform: translateY(-2px);
}

.mobile-filter-action-buttons .mobile-sticky-button.clear-filters-btn:hover {
    background: var(--text-secondary);
    box-shadow: 0 6px 25px rgba(108, 117, 125, 0.4);
    transform: translateY(-2px);
}

/* Mobile Sticky Button */
.mobile-sticky-button {
    background: var(--site-color);
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(45, 167, 113, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 80px;
    text-align: center;
}

.mobile-sticky-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(45, 167, 113, 0.4);
}

.mobile-sticky-button.active {
    background: #dc3545;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.3);
}

/* Different colors for different buttons */
.mobile-sticky-button.filters-btn {
    background: var(--site-color);
}

.mobile-sticky-button.filters-btn:hover {
    box-shadow: 0 6px 25px rgba(45, 167, 113, 0.4);
}

.mobile-sticky-button.sort-btn {
    background: #6c757d;
}

.mobile-sticky-button.sort-btn:hover {
    box-shadow: 0 6px 25px rgba(108, 117, 125, 0.4);
}

.mobile-sticky-button.sort-btn.active {
    background: #dc3545;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.3);
}

.mobile-sticky-button.clear-btn {
    background: #dc3545;
}

.mobile-sticky-button.clear-btn:hover {
    background: #c82333;
    box-shadow: 0 6px 25px rgba(220, 53, 69, 0.4);
}

.sticky-btn-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sticky-btn-content i {
    font-size: 1rem;
}

/* Mobile Overlay for Filters and Sort */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(4px);
}

.mobile-overlay.show {
    display: block;
}

/* Mobile Filters Panel */
.filters-sidebar.show-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 1001;
    overflow-y: auto;
    padding: 1rem;
    transform: translateX(0);
    transition: transform 0.3s ease;
    display: block;
}

/* Mobile Sort Panel */
.sort-section.show-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 1001;
    overflow-y: auto;
    padding: 1rem;
    transform: translateX(0);
    transition: transform 0.3s ease;
    display: block;
}

/* Mobile Panel Headers */
.mobile-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}

.mobile-panel-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

.mobile-panel-close {
    display: none; /* Hide by default on desktop */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0.5rem;
}

.sort-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}

.filters-header .filters-title {
    margin: 0;
}

.filters-header .filters-subtitle {
    margin: 0.25rem 0 0 0;
}

/* Dark Mode Support */
body.dark-mode .recipe-listing-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

body.dark-mode .filters-section {
    background: #2d2d2d;
    border-bottom-color: #404040;
}

body.dark-mode .recipe-card {
    background: #2d2d2d;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

body.dark-mode .recipe-title,
body.dark-mode .recipe-link {
    color: #ffffff;
}

body.dark-mode .recipe-description {
    color: #b0b0b0;
}

body.dark-mode .recipe-tag {
    background: #404040;
    color: #ffffff;
}

body.dark-mode .filter-select,
body.dark-mode .sort-select {
    background: #404040;
    border-color: #555555;
    color: #ffffff;
}

body.dark-mode .filter-label,
body.dark-mode .sort-label {
    color: #ffffff;
}

body.dark-mode .tag-label,
body.dark-mode .checkbox-label {
    color: #ffffff;
}

/* Dark Mode Mobile Sticky Buttons */
body.dark-mode .mobile-sticky-button.filters-btn {
    background: var(--site-color);
    color: white;
}

body.dark-mode .mobile-sticky-button.sort-btn {
    background: #6c757d;
    color: white;
}

body.dark-mode .mobile-sticky-button.active {
    background: #dc3545;
}

body.dark-mode .filters-sidebar.show-mobile,
body.dark-mode .sort-section.show-mobile {
    background: #2d2d2d;
    color: #ffffff;
}

body.dark-mode .mobile-panel-title {
    color: #ffffff;
}

body.dark-mode .mobile-panel-close {
    color: #a0aec0;
}

body.dark-mode .mobile-panel-header {
    border-bottom-color: #404040;
}

/* Desktop-only filter buttons */
.desktop-only {
    display: flex;
    position: sticky;
    bottom: 20px;
    align-items: center;
    justify-content: center;
    
}
.desktop-only button {
    padding: 10px 15px;
    max-width: 115px;
    max-height: 40px;

}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}


.iti {
    width: 100% !important;
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 0;
    margin-right: 6px;
}

.iti__flag-box,  .iti__country-name {
    margin-left: 6px;
}

.iti__country-list, .iti__country-list--dropup {
    width: var(--phone-num-block-width) !important;
}

[dir="rtl"] .form-control.is-invalid, [dir="rtl"] .was-validated .form-control:invalid {
    background-position: left calc(.375em + .1875rem) center;
}

[dir="rtl"] .weight-unit,
[dir="rtl"] .height-unit {
    padding-right: 15px !important;
    padding-left: 110px !important;
}