.femi-loading {
  filter: blur(5px);
}

#femi-payments-container .basket_accepted_card_link {
  background: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
}
#femi-payments-container .basket_accepted_card_link .basket_accepted_card_logo {
  aspect-ratio: unset;
}
#femi-payments-container .basket_accepted_card_link .basket_accepted_card_logo + .installment-payment-desc {
  margin-top: 10px;
  font-size: 12px;
}

.femi-checkout-errors {
  display: none;
}

.woo-hidden-form {
  display: none;
}

.invoice-toggle {
  display: none;
}

body.femilite-dev .woo-hidden-form .woocommerce-billing-fields__field-wrapper .form-row {
  margin-bottom: 60px;
}
body.femilite-dev .woo-hidden-form .woocommerce-billing-fields__field-wrapper .form-row, body.femilite-dev .woo-hidden-form .woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper {
  width: 100%;
  display: block;
}
body.femilite-dev .woo-hidden-form .woocommerce-billing-fields__field-wrapper .form-row input, body.femilite-dev .woo-hidden-form .woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper input {
  width: 100%;
}

#femi-login .login-result {
  margin-top: 20px;
}

.femi-video-start iframe {
  position: relative !important;
}

.femi-video-harmonogram.open {
  height: 500px;
}
.femi-video-harmonogram iframe {
  position: relative !important;
  width: 100%;
}

.basket_accepted_card_link.active-method {
  opacity: 1 !important;
}

.product-bottom-video {
  margin: -30px 0 40px;
}

.db_materials_dd_content_wrap.not-available {
  height: 0 !important;
}

#imieauto, #useremailauto, #mdemailauto {
  display: none !important;
}

.basket_accepted_cards_grid {
  align-items: center;
}

.load-harmonogram-video {
  cursor: pointer;
}

.users-summary {
  position: fixed;
  bottom: 0;
  right: 3px;
  padding: 10px 20px;
  color: #fff;
  background: #000;
  z-index: 99999;
  text-decoration: none;
}

.video-recorded-videos.show {
  height: 400px;
  padding: 30px;
}

.recorded-videos {
  padding: 30px 0 20px;
}
.recorded-videos .item {
  margin-bottom: 10px;
}
.recorded-videos .item a {
  color: #000;
  font-size: 15px;
}

.page-template-page-komunikator-ekspert .db_form_block {
  max-width: unset;
}
.page-template-page-komunikator-ekspert .clients-list .list {
  margin-top: 20px;
}
.page-template-page-komunikator-ekspert .clients-list .list a {
  display: block;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #efefef;
  text-decoration: none;
}
.page-template-page-komunikator-ekspert .clients-list .list a:last-of-type {
  border-bottom: 0;
}

.page-template-page-komunikator-user .db_form_block {
  max-width: unset;
}
.page-template-page-komunikator-user .chat-user-page .new-message-form .chat-message-sent {
  background: #014550;
  color: #fff;
  padding: 8px;
  border-left: 5px solid #008fa6;
  margin-bottom: 40px;
}
.page-template-page-komunikator-user .chat-user-page .new-message-form #new-message .acf-field {
  padding: 0;
  margin-bottom: 30px;
  border: 0 !important;
}
.page-template-page-komunikator-user .chat-user-page .new-message-form #new-message .acf-field .acf-file-uploader .acf-uploader .button {
  border: 1px solid #014550;
  background: transparent;
  color: #014550;
  padding: 8px 20px;
  border-radius: 10px;
  transition: all 0.5s;
}
.page-template-page-komunikator-user .chat-user-page .new-message-form #new-message .acf-field .acf-file-uploader .acf-uploader .button:hover {
  color: #fff;
  background: #014550;
}
.page-template-page-komunikator-user .chat-user-page .messages-list {
  margin-top: 40px;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list {
  margin-top: 15px;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item {
  margin-bottom: 40px;
  width: 90%;
  border-radius: 20px;
  padding: 20px;
  position: relative;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item.user {
  border: 1px solid #efefef;
  margin-left: auto;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item.expert {
  background: #f4f4f4;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item.expert .thumb img {
  border: 1px solid #014550;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .top {
  display: flex;
  align-items: center;
  width: 100%;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .top .thumb {
  width: 50px;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .top .thumb img {
  border-radius: 50%;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  object-fit: cover;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .top .name {
  width: calc(100% - 200px);
  margin-left: 15px;
  font-weight: bold;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .top .date {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .content {
  margin: 20px 15px 20px 65px;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .files-head {
  font-weight: bold;
  margin-bottom: 10px;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .files .file {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #efefef;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .files .file:last-of-type {
  border-bottom: 0;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .files .file a {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-style: italic;
  font-size: 12px;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .files .file a img {
  width: 20px;
  object-fit: cover;
  margin-right: 10px;
}
.page-template-page-komunikator-user .chat-user-page .messages-list .list .item .seen {
  font-size: 12px;
  text-align: right;
}

.chat-message-error {
  background: red;
  color: #fff;
  padding: 8px;
  border-left: 5px solid #803a3a;
  margin-bottom: 40px;
}

.div-has-agreements.error {
  border: 1px solid red;
  padding: 15px;
}
.div-has-agreements label {
  text-align: left !important;
}
.div-has-agreements label br {
  display: none;
}
.div-has-agreements label .w-checkbox-input {
  width: 1.38em;
  min-width: 1.38em;
  height: 1.38em;
  min-height: 1.38em;
}
.div-has-agreements label .req:after {
  content: "*";
}

.delete-measurement {
  position: absolute;
  top: calc(50% - 8px);
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  right: 60px;
  padding: 0 6px;
  background: red;
  color: #fff;
  text-decoration: none;
}

.reset-result {
  border-left: 5px solid #014550;
  background: #0f9aaf;
  display: inline-flex;
  max-width: 500px;
  margin: 20px auto 0;
  padding: 10px;
  color: #fff;
}

.no-hov {
  cursor: text !important;
}

.product_syllabus_dropdown .icon-status {
  margin-left: auto;
}
.product_syllabus_dropdown .icon-status img {
  width: 25px;
}

.set-as-viewed {
  background: #f2f9f3;
  padding: 12px;
  border-radius: 20px;
  display: block;
  text-decoration: none;
  font-weight: bold;
}

.db_materials_dd_list_item {
  margin-bottom: 10px;
  width: 100%;
}
.db_materials_dd_list_item .load-harmonogram-video-container {
  display: flex;
  align-items: center;
  width: 100%;
}
.db_materials_dd_list_item .load-harmonogram-video-container .set-as-viewed {
  margin-left: auto;
  padding: 8px;
  font-size: 12px;
}
.db_materials_dd_list_item .load-harmonogram-video-container .set-as-viewed + .icon-status {
  display: none;
}
.db_materials_dd_list_item .load-harmonogram-video-container .icon-status {
  margin-left: auto;
}
.db_materials_dd_list_item .load-harmonogram-video-container .icon-status img {
  width: 25px;
}

.cd-omnibus {
  font-size: 12px;
}

.product_hero_flex {
  flex-wrap: wrap;
}
.product_hero_flex .product-payment-methods {
  display: flex;
  padding: 10px 0;
  flex-wrap: wrap;
  margin-top: 20px;
}
@media (min-width: 992px) {
  .product_hero_flex .product-payment-methods {
    flex-wrap: nowrap;
  }
}
.product_hero_flex .product-payment-methods > div {
  background: #fff;
  width: 15%;
  margin-bottom: 10px;
  margin-left: 10px;
  border: 1px solid #dedede;
  border-radius: 6px;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.product_hero_flex .product-payment-methods > div:first-of-type {
  margin-left: 0;
}
.product_hero_flex .product-payment-methods > div img {
  width: 100%;
  height: auto;
}

.top_banner .is--top-banner {
  position: relative;
}
@media (min-width: 480px) {
  .top_banner .is--top-banner .header-countdown {
    margin-left: 30px;
  }
}
.top_banner .is--top-banner .header-countdown .countdown {
  display: flex;
  flex-wrap: nowrap;
  border-radius: 6px;
  background: #000;
  color: #fff;
}
.top_banner .is--top-banner .header-countdown .countdown > div {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  padding: 5px;
}
.top_banner .is--top-banner .header-countdown .countdown > div span {
  font-size: 9px;
}

.promo-countdown .container {
  color: #fff;
}
.promo-countdown .container .countdown {
  display: flex;
  flex-wrap: nowrap;
  border-radius: 6px;
  color: #fff;
  width: 100%;
  justify-content: center;
  margin-top: 40px;
}
.promo-countdown .container .countdown > div {
  font-size: 32px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  position: relative;
  margin-right: 15px;
}
@media (min-width: 1200px) {
  .promo-countdown .container .countdown > div {
    font-size: 55px;
  }
}
.promo-countdown .container .countdown > div:after {
  content: ":";
  position: absolute;
  top: 5px;
  right: -10px;
}
.promo-countdown .container .countdown > div:last-of-type:after {
  display: none;
}
.promo-countdown .container .countdown > div span {
  font-size: 12px;
  text-align: center;
}
@media (min-width: 1200px) {
  .promo-countdown .container .countdown > div span {
    margin-top: 15px;
  }
}

.account_menu_wrap-container {
  padding: 0 !important;
  background: transparent;
}
.account_menu_wrap-container .femi-cta-account {
  margin-top: 30px;
}

table.users {
  border-collapse: collapse;
  width: 100%;
}
table.users th,
table.users td {
  border: 1px solid #014550;
  color: #014550;
  padding: 8px;
  text-align: left;
}
table.users th {
  background-color: #014550;
  color: #fff;
}
table.users tr:nth-child(even) {
  background-color: #f2f2f2;
}

.survey-answers .question {
  font-weight: bold;
  font-size: 17px;
}
.survey-answers .answer {
  font-size: 15px;
  padding: 10px 0 20px;
  border-bottom: 1px solid #014550;
  margin-bottom: 20px;
}

.test-md-start-block {
  max-height: 280px;
  overflow: auto;
}

.is--medical_form, .is--doc_advice {
  min-height: 140px;
}

.is--meet_live {
  max-height: 320px;
  overflow: auto;
}

.show-medfile-register-iframe, .add-to-cart-femimed {
  display: none;
}
.show-medfile-register-iframe[data-slot], .add-to-cart-femimed[data-slot] {
  display: block;
}

.doc_calendar_time_card.active {
  background: #c5facb;
}
.doc_calendar_time_card .slot-selector {
  cursor: pointer;
}

.after-choose-slot {
  display: none;
  padding-bottom: 2.6875em;
}
.after-choose-slot iframe {
  width: 100%;
  height: 1150px;
  border: 0;
}

.medfile-noresults {
  padding: 10px;
  background: #c5facb;
  border-left: 6px solid #014550;
}

.doc-not-available {
  border-radius: 25px;
  background: #c5facb;
  margin: 20px 0;
  padding: 15px;
  border-left: 32px solid #014550;
}

.medfile-noresults.calendar-noresults {
  background: #fff;
  border: 0;
  padding: 30px 30px 50px;
  margin-top: -60px;
  text-align: center;
  font-size: 1vw;
  line-height: 1.6;
}

/* MEAL  */

@charset "UTF-8";
/* ===== FEMILITE MEAL PLANNER STYLES ===== */
/* ===== VARIABLES ===== */
/* ===== MIXINS ===== */
/* ===== BASE LAYOUT ===== */
.recipes-page-layout {
  display: flex;
  gap: 1.25em;
  background: #fff;
  padding: 1.25em 1.875em;
  border-radius: 1em;
}

.recipes-main-content {
  flex: 1;
  max-width: 65%;
}

.meal-plan-sidebar {
  width: 35%;
  min-width: 20em;
  position: sticky;
  top: 1.25em;
  height: fit-content;
}

/* ===== TYPOGRAPHY ===== */
.recipes-title {
  font-size: 0.875em;
  font-weight: 400;
  color: #2c5f5f;
  margin-bottom: 0.9375em;
  line-height: 1.2;
}

.recipes-subtitle {
  font-size: 1em;
  color: #666;
  margin-bottom: 3.125em;
  line-height: 1.5;
}

/* ===== MEAL CATEGORIES ===== */
.meal-category {
  margin-bottom: 3.75em;
}
.meal-category h3 {
  font-size: 1.25em;
  font-weight: 400;
  color: #014550;
  margin-bottom: 1.25em;
  padding-bottom: 0.75em;
  border-bottom: 0.1875em solid #F2F9F3;
}

/* ===== RECIPE GRID & CARDS ===== */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}

.recipe-grid {
  align-items: flex-start;
}

.add-to-plan-btn {
  margin-left: -1rem;
  width: calc(100% + 2rem) !important;
  position: relative;
  top: 0.75rem;
  padding-top: 0.3rem;
  padding-bottom: 0.5rem;
  font-size: 0.875em !important;
  transition: all 0.5s;
}

.add-to-plan-btn:hover {
  background: #2c5f5f;
  color: #fff;
}

.recipe-card.added-recipe .add-to-plan-btn {
  background: #3ddd8f;
  color: #3ddd8f !important;
}

.recipe-card.added-recipe .add-to-plan-btn:before {
  content: "Dodano do planu";
  font-size: 1em !important;
  display: block;
  color: #2c5f5f !important;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  top: 50%;
}

.recipe-card {
  border: 0.0625em solid #F6F6F6;
  padding: 0.5em 0.5em 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  border-radius: 1.25em;
  overflow: hidden;
  transition: all 0.5s;
}
.recipe-card.added-recipe {
  border-color: #04DD8F;
}
.recipe-card.added-recipe .recipe-image svg {
  opacity: 1;
}
.recipe-card.selected .add-to-plan-btn {
  background: #4CAF50;
}

.recipe-image img {
  height: 8em;
  width: 8em;
  object-fit: cover;
  transition: transform 0.3s ease;
  overflow: hidden;
  position: relative;
  border-radius: 0.75em;
}
.recipe-image svg {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 1.3em;
  height: auto;
  transition: all 0.5s;
  opacity: 0;
}

.recipe-info {
  padding: 0.875em 0 0;
  text-align: center;
}
.recipe-info h4 {
  font-size: 0.875em;
  font-weight: 400;
  color: #014550;
  margin: 0 0 0.5em 0;
  line-height: 1.3;
}

.recipe-nutrition {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 0em;
  margin-bottom: 0.75em;
  font-size: 0.6875em;
  color: #999;
}

.recipe-time {
  font-size: 0.75em;
  color: #999;
  margin-bottom: 0.9375em;
}

/* ===== RECIPE ACTIONS ===== */
.recipe-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.view-recipe-link {
  background: transparent;
  color: #2c5f5f;
  border: 0.0625em solid #e0e0e0;
}
.view-recipe-link:hover {
  background: #f8f9fa;
  border-color: #2c5f5f;
}

.add-to-plan-btn {
  font-size: 0.8em !important;
  color: #014550;
  text-align: center;
  width: 100%;
}

/* ===== MEAL PLAN SIDEBAR ===== */
.meal-plan-box {
  background: #fff;
  border: 0.0625em solid #04DD8F;
  border-radius: 1.25em;
  padding: 1.4em;
  margin-bottom: 1.25em;
}
.meal-plan-box h3 {
  font-size: 1.25em;
  font-weight: 400;
  color: #2c5f5f;
  margin: 0 0 0.3125em 0;
}

.meal-plan-date {
  font-size: 1.25em;
  font-weight: 700;
  color: #2c5f5f;
  margin-bottom: 1.25em;
}

.meal-plan-info {
  font-size: 0.75em;
  color: #014550;
  line-height: 1.6;
  margin-bottom: 1.5625em;
}

/* ===== NUTRITION SUMMARY ===== */
.nutrition-summary {
  box-shadow: 0 0.125em 0.75em rgba(0, 0, 0, 0.06);
  border-radius: 0.75em;
  background: #fff;
  padding: 1.25em;
  margin-bottom: 1.5625em;
}
.nutrition-summary h4 {
  font-size: 1em;
  font-weight: 600;
  color: #014550;
  margin: 0 0 0.9375em 0;
}

.nutrition-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;
}

.nutrition-item {
  font-size: 0.875em;
  color: #666;
}
.nutrition-item strong {
  color: #2c5f5f;
  font-weight: 600;
}

/* ===== MEAL PLAN ITEMS ===== */
.meal-plan-items {
  margin-bottom: 1.5625em;
}

.meal-plan-item {
  margin-bottom: 0.9375em;
  overflow: hidden;
}

.meal-item-header h4 {
  margin: 0;
  font-size: 0.8em;
  font-weight: 500;
}

.meal-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meal-item-title {
  font-size: 0.875em;
  color: #333;
  font-weight: 400;
}

.meal-item-empty {
  color: #999;
  font-style: italic;
  font-size: 0.875em;
}

/* ===== PORTION CONTROLS ===== */
.portion-control {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.portion-minus,
.portion-plus {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: white;
  color: #2c5f5f;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 1em;
  transition: all 0.2s ease;
}
.portion-minus:hover,
.portion-plus:hover {
  background: #f0f8f8;
  transform: scale(1.1);
}

.portion-count {
  font-size: 0.875em;
  font-weight: 600;
  min-width: 1.25em;
  text-align: center;
}

/* ===== WARNINGS & ALERTS ===== */
.meal-plan-warning {
  background: #fff3cd;
  border: 0.0625em solid #ffeaa7;
  border-radius: 0.5em;
  padding: 0.75em;
  margin: 0.9375em 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625em;
}
.meal-plan-warning::before {
  content: "⚠️";
  font-size: 1em;
  margin-top: 0.0625em;
}

.meal-plan-warning-text {
  font-size: 0.8125em;
  color: #856404;
  line-height: 1.4;
}

/* ===== BUTTONS ===== */
.meal-plan-actions {
  display: flex;
  gap: 0.9375em;
}

.btn-primary,
.btn-secondary {
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 0.75em 1.5625em;
  border-radius: 1.5625em;
  font-size: 0.875em;
  flex: 1;
}

.btn-primary {
  background: #2c5f5f;
  color: white;
}

.btn-secondary {
  background: white;
  color: #2c5f5f;
  border: 0.125em solid #2c5f5f;
}

/* ===== SEARCH BOX ===== */
.search-recipe-box {
  text-align: center;
  margin-top: 1.25em;
}

.search-recipe-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  padding: 0.75em 1.5625em;
  background: white;
  color: #2c5f5f;
  text-decoration: none;
  border-radius: 1.5625em;
  font-weight: 500;
  box-shadow: 0 0.125em 0.75em rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 0.125em solid transparent;
}
.search-recipe-link:hover {
  border-color: #2c5f5f;
}
.search-recipe-link::before {
  content: "🔍";
  font-size: 1em;
}

/* ===== USER AVATAR ===== */
.user-avatar {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: #6c5ce7;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875em;
  position: absolute;
  top: 0.9375em;
  right: 0.9375em;
  box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.1);
}

/* ===== NOTIFICATIONS ===== */
.notification {
  position: fixed;
  top: 1.875em;
  right: 1.875em;
  padding: 0.9375em 1.5625em;
  border-radius: 0.75em;
  color: white;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 0.25em 1.25em rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(100%);
  animation: slideInNotification 0.4s ease forwards;
}
.notification-success {
  background: linear-gradient(135deg, #4CAF50, #45a049);
}
.notification-error {
  background: linear-gradient(135deg, #f44336, #d32f2f);
}
.notification-info {
  background: linear-gradient(135deg, #2196F3, #1976D2);
}

@keyframes slideInNotification {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ===== NO RECIPES STATE ===== */
.no-recipes {
  background: #f8f9fa;
  border: 0.125em dashed #dee2e6;
  border-radius: 0.75em;
  padding: 2.5em 1.25em;
  text-align: center;
  color: #6c757d;
  font-style: italic;
}
.no-recipes a {
  color: #2c5f5f;
  text-decoration: underline;
  font-weight: 500;
}
.no-recipes a:hover {
  color: #1e4444;
}

/* ===== SINGLE RECIPE PAGE ===== */
/* Layout */
.recipe-single-layout {
  display: flex;
  gap: 2.5em;
  background-color: #fff;
  border-radius: 1.2em;
  margin-top: 2em;
  padding: 2em;
}

.recipe-main-content {
  flex: 1;
  max-width: 65%;
}

.recipe-sidebar {
  width: 35%;
  min-width: 20em;
  position: sticky;
  top: 1.25em;
  height: fit-content;
}

/* Breadcrumb */
.recipe-breadcrumb {
  margin-bottom: 1.875em;
}
.recipe-breadcrumb a {
  color: #2c5f5f;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: color 0.3s ease;
}
.recipe-breadcrumb a:hover {
  color: #1e4444;
}

/* Recipe Header */
.recipe-header {
  background-color: #fff;
  border-radius: 1.25em;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.recipe-header-content {
  flex: 1;
  padding: 2.5em;
}

.recipe-title {
  font-size: 1.5em;
  font-weight: 500;
  color: #2c5f5f;
  margin: 0 0 1.25em 0;
  line-height: 1.2;
}

.recipe-description {
  font-size: 0.8125em;
}

.recipe-meta {
  margin-bottom: 1.5625em;
}

/* Author */
.recipe-author {
  display: flex;
  align-items: center;
  gap: 0.9375em;
  margin-top: 2em;
}

.author-avatar {
  width: 4em;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  height: auto;
}
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-label {
  font-size: 0.6875em;
  font-weight: 400;
  color: #2c5f5f;
  letter-spacing: 0.03125em;
  margin-bottom: 0.125em;
}

.author-name {
  font-size: 1em;
  font-weight: 400;
  color: #2c5f5f;
}

/* Main Image */
.recipe-image-main {
  width: 100%;
  height: 100%;
}
.recipe-image-main img {
  width: 100%;
  height: 30em;
  object-fit: cover;
}

/* Portions Section */
.recipe-portions-section {
  display: grid;
  grid-template-columns: 1fr 70px;
  margin-bottom: 1em;
  align-items: center;
}
@media (max-width: 768px) {
  .recipe-portions-section {
    grid-template-columns: 1fr;
  }
}

.recipe-portions-section h3 {
  font-size: 1em;
  font-weight: 500;
  color: #2c5f5f;
  margin: 0 0 0.5em 0;
}

.portions-subtitle {
  font-size: 0.875em;
  color: #666;
  margin: 0;
}

.portions-control {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid #014550;
  padding: 0.2em;
  border-radius: 100px;
}
.portions-control .portion-number {
  text-align: center;
  font-size: 0.7em;
}
.portions-control button {
  background-color: transparent;
  padding: 0;
  color: #014550;
  font-weight: 400;
}

/* Nutrition Grid */
.recipe-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5625em;
  margin-bottom: 3.125em;
  padding: 1em 1.2em;
  background: #F2F9F3;
  border-radius: 1em;
}
.recipe-nutrition-grid .nutrition-value {
  display: block;
  font-size: 0.9em;
  font-weight: 500;
  color: #014550;
}
.recipe-nutrition-grid .nutrition-label {
  font-size: 0.9em;
  color: #014550;
  font-weight: 400;
}

/* Ingredients */
.recipe-ingredients {
  border: 1px solid #EDF4EE;
  border-radius: 0.5em;
  padding: 1.25em;
}
@media (max-width: 768px) {
  .recipe-ingredients {
    width: calc(100% - 30px);
    margin-left: 15px;
  }
}
.recipe-ingredients h3 {
  font-size: 1em;
  font-weight: 400;
  color: #014550;
  display: block;
  border-bottom: 1px solid #EDF4EE;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

.ingredient-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: 0.81em;
  margin-bottom: 0.875em;
}
.ingredient-item div {
  width: 3em;
}
.ingredient-item:last-child {
  margin-bottom: 0;
}

.ingredient-amount {
  font-weight: 700;
  color: #2c5f5f;
  min-width: 3.125em;
  text-align: right;
}

.ingredient-unit {
  color: #666;
  min-width: 2.5em;
}

.ingredient-name {
  flex: 1;
  color: #333;
}

.ingredient-description {
  border: 1px solid #EDF4EE;
  border-radius: 0.5em;
  padding: 1.25em;
}

/* Instructions */
.recipe-instructions {
  border: 1px solid #EDF4EE;
  border-radius: 0.5em;
  padding: 1.25em;
  margin-top: 1em;
}
@media (max-width: 768px) {
  .recipe-instructions {
    width: calc(100% - 30px);
    margin-left: 15px;
  }
}

.instructions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EDF4EE;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
.instructions-header h3 {
  font-size: 1em;
  font-weight: 400;
  color: #014550;
  display: block;
}

.prep-time {
  color: #014550;
  font-size: 0.62em;
  font-weight: 400;
}

.instruction-step {
  display: flex;
  gap: 1.25em;
  margin-bottom: 1.5625em;
  align-items: flex-start;
}
.instruction-step:last-child {
  margin-bottom: 0;
}

.step-number {
  width: 2em;
  height: 2em;
  background: #2c5f5f;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875em;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  color: #333;
  line-height: 1.6;
  font-size: 1em;
  padding-top: 0.25em;
}

/* ===== SIDEBAR COMPONENTS ===== */
/* Add to Plan Widget */
.add-to-plan-widget {
  margin-bottom: 1.875em;
}

.add-to-plan-main-btn {
  width: 100%;
  padding: 0.9375em;
  background: #fff;
  border: 1px solid #2c5f5f;
  color: #2c5f5f;
  border-radius: 300px;
  font-size: 0.875em;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}
.add-to-plan-main-btn:hover {
  background: #1e4444;
  color: #fff;
}

/* Daily Plan Widget */
.daily-plan-widget {
  background: rgba(184, 223, 223, 0.3);
  border: 0.125em solid rgba(184, 223, 223, 0.5);
  border-radius: 1.25em;
  padding: 1.5625em;
}
.daily-plan-widget h4 {
  font-size: 1.125em;
  font-weight: 600;
  color: #2c5f5f;
  margin: 0 0 0.3125em 0;
}

.plan-date {
  font-size: 1.125em;
  font-weight: 700;
  color: #2c5f5f;
  margin-bottom: 1.25em;
}

.plan-description {
  font-size: 0.8125em;
  color: #666;
  line-height: 1.5;
  margin-bottom: 1.5625em;
}

/* Plan Items */
.plan-items {
  margin-bottom: 1.5625em;
}

.plan-item {
  box-shadow: 0 0.125em 0.75em rgba(0, 0, 0, 0.06);
  border-radius: 0.75em;
  background: #fff;
  margin-bottom: 0.75em;
  overflow: hidden;
}

.plan-item-header {
  background: #2c5f5f;
  color: white;
  padding: 0.75em 0.9375em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-item-header strong {
  font-size: 0.8125em;
  font-weight: 600;
}

.plan-item-controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.plan-minus,
.plan-plus,
.plan-remove {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.75em;
  transition: all 0.2s ease;
}

.plan-minus,
.plan-plus {
  background: white;
  color: #2c5f5f;
}
.plan-minus:hover,
.plan-plus:hover {
  background: #f0f8f8;
  transform: scale(1.1);
}

.plan-remove {
  background: #ff6b6b;
  color: white;
  font-size: 0.875em;
}
.plan-remove:hover {
  background: #ff5252;
  transform: scale(1.1);
}

.plan-count {
  font-size: 0.75em;
  font-weight: 600;
  min-width: 0.9375em;
  text-align: center;
}

.plan-item-name {
  padding: 0.75em 0.9375em;
  font-size: 0.8125em;
  color: #333;
  line-height: 1.4;
}

/* Plan Warning */
.plan-item-warning {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: #fff3cd;
  border: 0.0625em solid #ffeaa7;
  border-radius: 0.5em;
  padding: 0.625em 0.75em;
  margin-bottom: 0.75em;
}

.warning-icon {
  font-size: 0.875em;
}

.warning-text {
  font-size: 0.75em;
  color: #856404;
  line-height: 1.3;
}

/* Plan Actions */
.plan-actions {
  display: flex;
  gap: 0.75em;
}

.btn-save-plan,
.btn-download-pdf {
  flex: 1;
  padding: 0.625em 0.9375em;
  border-radius: 1.25em;
  font-size: 0.8125em;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-save-plan {
  background: #2c5f5f;
  color: white;
}
.btn-save-plan:hover {
  background: #1e4444;
  transform: translateY(-0.0625em);
}

.btn-download-pdf {
  background: white;
  color: #2c5f5f;
  border: 0.125em solid #2c5f5f;
}
.btn-download-pdf:hover {
  background: #2c5f5f;
  color: white;
  transform: translateY(-0.0625em);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 75em) {
  .recipe-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5625em;
  }
}
@media (max-width: 62em) {
  .recipes-page-layout,
  .recipe-single-layout {
    flex-direction: column;
    gap: 1.875em;
  }
  .recipes-main-content,
  .meal-plan-sidebar,
  .recipe-main-content,
  .recipe-sidebar {
    max-width: 100%;
    width: 100%;
  }
  .recipe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nutrition-values {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }
  .recipe-header {
    flex-direction: column;
    gap: 1.5625em;
  }
  .recipe-image-main {
    width: 100%;
    max-width: 25em;
    margin: 0 auto;
  }
  .recipe-nutrition-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25em;
  }
}
@media (max-width: 48em) {
  .recipes-title,
  .recipe-title {
    font-size: 1.5em;
  }
  .recipe-image img {
    width: 100%;
    height: 50vw;
    object-fit: cover;
    object-position: center;
  }
  .recipe-grid {
    font-size: 134%;
  }
  .recipe-grid {
    display: flex;
    overflow-x: auto;
    gap: 1em;
    padding-bottom: 1em;
    scroll-snap-type: x mandatory;
    /* Custom scrollbar for better UX */
  }
  .recipe-grid .recipe-card {
    flex: 0 0 80%; /* Fixed width for scrolling */
    scroll-snap-align: start;
  }
  .recipe-grid::-webkit-scrollbar {
    height: 6px;
  }
  .recipe-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  .recipe-grid::-webkit-scrollbar-thumb {
    background: #04DD8F;
    border-radius: 3px;
  }
  .recipe-grid::-webkit-scrollbar-thumb:hover {
    background: #03c182;
  }
  .meal-plan-box,
  .recipe-portions-section,
  .daily-plan-widget {
    padding: 1.25em;
  }
  .meal-plan-actions,
  .plan-actions {
    flex-direction: column;
  }
  .recipe-nutrition-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.9375em;
    width: calc(100% - 30px);
    margin-left: 15px;
  }
  .recipe-header-content {
    padding: 0 1em 2em;
  }
  .recipe-header {
    gap: 1.25em;
    flex-direction: column-reverse;
    display: flex;
  }
  .recipe-image-main {
    height: auto;
    max-width: 100%;
  }
  .recipe-image-main img {
    width: 100%;
    height: 80vw;
    object-fit: cover;
  }
}
@media (max-width: 36em) {
  .recipe-single-layout {
    padding: 0.625em 0;
  }
  .portions-control {
    gap: 0.9375em;
    display: grid;
    grid-template-columns: 20px 20px 20px;
    justify-content: space-between;
  }
  .portion-btn {
    width: 2.1875em;
    height: 2.1875em;
    font-size: 1.125em;
  }
  .portion-number {
    font-size: 1.25em;
  }
  .ingredient-item {
    font-size: 0.875em;
    gap: 0.5em;
  }
  .step-content {
    font-size: 0.875em;
  }
}
/* ===== MEAL PLAN PAGE SPECIFIC STYLES ===== */
/* ===== HERO SECTION ===== */
.meal-plan-hero {
  background: #fff;
  padding: 2.5em;
  margin-bottom: 1.875em;
}
.meal-plan-hero .hero-content {
  display: grid;
  grid-template-columns: 20em 1fr;
  gap: 2em;
  align-items: center;
}
@media (max-width: 768px) {
  .meal-plan-hero .hero-content {
    grid-template-columns: 1fr;
  }
}
.meal-plan-hero .hero-content .hero-left {
  text-align: center;
  border-radius: 1.25em;
  border: 0.0625em solid #04DD8F;
  padding: 2em 1em;
}
.meal-plan-hero .hero-content .hero-left h4 {
  font-size: 1.5em;
  max-width: 13em;
  margin: 0 auto 0.575em auto;
}
.meal-plan-hero .hero-content .hero-right {
  display: flex;
  align-items: center;
  gap: 1.25em;
}
@media (max-width: 768px) {
  .meal-plan-hero .hero-content .hero-right {
    flex-direction: column-reverse;
  }
}

.hero-text h4 {
  font-size: 1.75em;
  font-weight: 700;
  color: #014550;
  margin: 0 0 0.9375em 0;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 0.87em;
  color: #014550;
  font-weight: 400;
  margin: 0 0 1em 0;
}

.calorie-selector {
  display: flex;
  gap: 0.5em;
  background: #F2F9F3;
  border-radius: 200rem;
  justify-content: space-between;
  padding: 0.75em;
  max-width: 16em;
  margin: 0 auto;
}
.calorie-selector .calorie-btn {
  background: transparent;
  border: 0.125em solid transparent;
  padding: 0.5em 1em;
  border-radius: 100rem;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  color: #014550;
  transition: all 0.3s ease;
  opacity: 0.5;
  font-weight: 400;
}
.calorie-selector .calorie-btn.active, .calorie-selector .calorie-btn:hover {
  color: #014550;
  opacity: 1;
  border-color: #014550;
}

.hero-description h5 {
  font-size: 0.7em;
  text-transform: uppercase;
  color: #014550;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}
.hero-description h3 {
  font-size: 1.1em;
  font-weight: 400;
}
.hero-description p {
  color: #014550;
  font-size: 0.875em;
  line-height: 1.4;
  margin-top: 1em;
}

.hero-image {
  width: 10em;
  flex-shrink: 0;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== SEARCH RECIPE BOX ===== */
.search-recipe-box {
  margin-bottom: 1.25em;
}
.search-recipe-box .search-recipe-input {
  background: #f2f9f3;
  border-radius: 3em;
  border: 0;
  padding: 1.25em 0.9375em;
  font-size: 0.875em;
  color: #014550;
  transition: all 0.3s ease;
  outline: none;
  width: 100%;
}
.search-recipe-box .search-recipe-input:focus {
  border-color: #014550;
  box-shadow: 0 0 0 0.1875em rgba(1, 69, 80, 0.1);
}
.search-recipe-box .search-recipe-input::placeholder {
  color: #999;
  opacity: 1;
}

.no-recipes-search {
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 1.25em;
  background: #f8f9fa;
  border-radius: 0.5em;
  margin: 0.625em 0;
}

/* ===== MONTH INFO BOX ===== */
.month-info-box {
  background: #e8f5e8;
  border: 0.125em solid #7ed8c6;
  border-radius: 0.9375em;
  padding: 0.9375em;
  margin-bottom: 1.25em;
  text-align: center;
}
.month-info-box h4 {
  font-size: 0.875em;
  color: #014550;
  margin: 0 0 0.5em 0;
  font-weight: 600;
}
.month-info-box .current-month {
  font-size: 1em;
  font-weight: 700;
  color: #014550;
  margin-bottom: 0.5em;
}
.month-info-box p {
  font-size: 0.75em;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* ===== NUTRITION WARNING ===== */
.nutrition-warning {
  align-items: center;
  gap: 0.625em;
  padding: 0.75em;
  background: #f2f9f3;
  border-radius: 0.5em;
  margin: 0.9375em 0;
}
.nutrition-warning .warning-icon {
  font-size: 1em;
}
.nutrition-warning p {
  margin: 0;
  font-size: 0.775em;
  color: #315860;
  line-height: 1.3;
}

/* ===== MEAL PLAN ITEMS UPDATED ===== */
.meal-plan-item {
  margin-bottom: 0.9375em;
}
.meal-plan-item .meal-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
}
.meal-plan-item .meal-item-header h4 {
  margin: 0;
  font-size: 0.875em;
  font-weight: 500;
  color: #014550;
}
.meal-plan-item .meal-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
}
.meal-plan-item .meal-item-content:last-child {
  margin-bottom: 0;
}
.meal-plan-item .meal-item-content .meal-item-title {
  font-size: 0.8125em;
  color: #014550;
  flex: 1;
  margin-right: 0.625em;
}
.meal-plan-item .meal-item-content .meal-item-controls {
  display: flex;
  align-items: center;
  gap: 0.625em;
}
.meal-plan-item .meal-item-content .meal-item-controls .portion-control {
  border: 1px solid #014550;
  border-radius: 100px;
  padding: 0.25em 0.25em;
}
.meal-plan-item .meal-item-content .meal-item-controls .portion-control span {
  font-weight: 400 !important;
}
.meal-plan-item .meal-item-content .meal-item-controls .portion-control button {
  width: auto !important;
  height: auto !important;
  padding: 0 0.2em !important;
  border: 0 !important;
  font-weight: 400 !important;
}
.meal-plan-item .meal-item-content .meal-item-controls .portion-control button:hover {
  background: transparent !important;
  color: #014550 !important;
  transform: scale(1) !important;
}
.meal-plan-item .meal-item-empty span {
  font-size: 0.75em;
  color: #6c757d;
  font-style: italic;
}

.portion-control {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.portion-control .portion-minus,
.portion-control .portion-plus {
  width: 1.5em;
  height: 1.5em;
  border: 0.0625em solid #dee2e6;
  background: white;
  border-radius: 50%;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #014550;
  transition: all 0.3s ease;
}
.portion-control .portion-minus:hover,
.portion-control .portion-plus:hover {
  background: #7ed8c6;
  color: white;
  border-color: #7ed8c6;
}
.portion-control .portion-count {
  font-weight: 600;
  color: #014550;
  min-width: 1.25em;
  text-align: center;
  font-size: 0.875em;
}

/* ===== ADDITIONAL RECIPE STYLES ===== */
/* ===== NUTRITION SUMMARY UPDATED ===== */
.nutrition-summary {
  margin: 1.25em 0;
  padding: 0.9375em;
  background: #f8f9fa;
  border-radius: 0.5em;
  display: none !important;
}
.nutrition-summary h4 {
  margin: 0 0 0.625em 0;
  font-size: 0.875em;
  color: #014550;
  font-weight: 600;
}
.nutrition-summary .nutrition-values {
  display: flex;
  flex-direction: column;
  gap: 0.3125em;
}
.nutrition-summary .nutrition-values .nutrition-item {
  font-size: 0.75em;
  color: #495057;
}
.nutrition-summary .nutrition-values .nutrition-item strong {
  color: #014550;
}

/* ===== MEAL PLAN ACTIONS ===== */
.meal-plan-actions {
  display: flex;
  gap: 0.625em;
}
.meal-plan-actions .btn-primary,
.meal-plan-actions .btn-secondary {
  flex: 1;
  padding: 0.75em;
  border: none;
  border-radius: 0.5em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875em;
  border-radius: 300rem;
}
.meal-plan-actions .btn-primary {
  background: #014550;
  color: #04DD8F;
  border: 1px solid #014550;
}
.meal-plan-actions .btn-primary:hover {
  background: #fff;
  color: #014550;
}
.meal-plan-actions .btn-secondary {
  background: #fff;
  color: #014550;
  border: 1px solid #014550;
}
.meal-plan-actions .btn-secondary:hover {
  color: #fff;
  background: #014550;
}

/* ===== ADD MORE BUTTON ===== */
.add-more-container {
  text-align: center;
  margin-top: 1.25em;
}
.add-more-container .add-more-btn {
  padding: 0.625em 1.875em;
  background: #7ed8c6;
  color: #014550;
  border: none;
  border-radius: 1.25em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.add-more-container .add-more-btn:hover {
  background: #014550;
  color: white;
}

/* ===== CHATBOT ===== */
.chatbot-widget {
  position: absolute;
  bottom: 1.25em;
  right: 1.25em;
}
.chatbot-widget .chatbot-avatar {
  width: 3.125em;
  height: 3.125em;
  background: #6b46c1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.125em;
  cursor: pointer;
  box-shadow: 0 0.25em 0.9375em rgba(107, 70, 193, 0.3);
  transition: transform 0.3s ease;
}
.chatbot-widget .chatbot-avatar:hover {
  transform: scale(1.1);
}

/* ===== WAITING FOR PROGRAM MESSAGE ===== */
.waiting-for-program-message {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: auto;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
.waiting-for-program-message .waiting-content {
  text-align: center;
  max-width: 100%;
  background: #fff3cd;
  border: 0.0625em solid #ffeaa7;
  border-radius: 0.75em;
  padding: 2.5em 1.875em;
}
.waiting-for-program-message .waiting-content .waiting-icon {
  font-size: 3em;
  margin-bottom: 1.25em;
  display: block;
}
.waiting-for-program-message .waiting-content h3 {
  color: #856404;
  font-size: 1.5em;
  margin: 0 0 1.25em 0;
  font-weight: 600;
}
.waiting-for-program-message .waiting-content p {
  color: #856404;
  font-size: 1em;
  line-height: 1.6;
  margin: 0 0 0.9375em 0;
}
.waiting-for-program-message .waiting-content p:last-child {
  margin-bottom: 0;
  font-weight: 500;
}

/* ===== ALERT ANIMATIONS ===== */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-0.625em);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 6.25em;
  }
}
@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 6.25em;
  }
  to {
    opacity: 0;
    transform: translateY(-0.625em);
    max-height: 0;
  }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 64em) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 1.25em;
    text-align: center;
  }
  .hero-right {
    justify-content: center;
  }
}
@media (max-width: 48em) {
  .meal-plan-hero {
    margin: 0 -1.25em 1.25em -1.25em;
    border-radius: 0;
    padding: 1.25em;
  }
  .hero-text h1 {
    font-size: 1.5em;
  }
  .calorie-selector {
    justify-content: center;
  }
  .hero-right {
    flex-direction: column;
    text-align: center;
  }
}
/* ===== SAVED MEAL PLANS PAGE STYLES ===== */
/* Dashboard Layout */
.meal-plans-dashboard {
  width: 100%;
  max-width: 62.5em; /* 1000px */
  background: #fff;
  border-radius: 1em;
  padding: 1.5em;
}

.meal-plans-header {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  margin-bottom: 2.5em; /* 40px */
  padding: 1.875em; /* 30px */
  gap: 1.25em;
}
.meal-plans-header svg {
  width: 1em;
  height: auto;
}
.meal-plans-header .meal-plans-icon {
  font-size: 3em; /* 48px */
  margin-right: 1.25em; /* 20px */
}
.meal-plans-header .meal-plans-header-text h1 {
  font-size: 1.5em; /* 24px */
  color: #014550;
  margin: 0 0 0.5em 0; /* 8px */
  font-weight: 500;
}
.meal-plans-header .meal-plans-header-text p {
  color: #666;
  margin: 0;
  font-size: 1em; /* 16px */
}

/* Saved Plans List */
.saved-meal-plans-list {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 16px */
}

.saved-plan-item {
  background: #f8f9fa;
  border-radius: 0.75em; /* 12px */
  border: 0.0625em solid #e9ecef; /* 1px */
  overflow: hidden;
  transition: all 0.3s ease;
}
.saved-plan-item:hover {
  box-shadow: 0 0.25em 0.75em rgba(1, 69, 80, 0.1); /* 4px 12px */
}

.saved-plan-item.active > div {
  background: #f2f9f3;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1.25em; /* 16px 20px */
  cursor: pointer;
  background: white;
  transition: background-color 0.3s ease;
}
.plan-header:hover {
  background: #f8f9fa;
}

.plan-expand-arrow {
  margin-right: 1em; /* 8px */
  transition: transform 0.3s ease;
  color: #014550;
  font-size: 0.75em; /* 12px */
}
.plan-expand-arrow svg {
  transition: all 0.5s;
}
.plan-expand-arrow svg rect, .plan-expand-arrow svg path {
  transition: all 0.5s;
}
.plan-expand-arrow.expanded {
  transform: rotate(180deg);
}
.plan-expand-arrow.expanded svg path {
  fill: #fff;
}
.plan-expand-arrow.expanded svg rect {
  fill: #104550;
}

.saved-plan-item.active .plan-actions-toggle {
  background: #fff;
}

.saved-plan-item.active span.plan-view-icon {
  background: #fff;
}

.plan-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.plan-title {
  font-size: 1.125em; /* 18px */
  color: #014550;
  margin: 0;
  font-weight: 600;
}

.plan-summary {
  display: flex;
  gap: 1em; /* 16px */
  align-items: center;
}

.plan-calories {
  color: #014550;
  font-size: 0.875em; /* 14px */
  font-weight: 400;
}

.plan-actions-toggle {
  cursor: pointer;
  padding: 0.25em 0.5em; /* 4px 8px */
  border-radius: 0.25em; /* 4px */
  color: #666;
  font-size: 1.125em; /* 18px */
  transition: background-color 0.3s ease;
}
.plan-actions-toggle:hover {
  background: #e9ecef;
}

/* Plan Actions */
.plan-actions {
  display: flex;
  gap: 0.5em; /* 8px */
  padding: 0.5em; /* 12px 20px */
  background: #f8f9fa;
  border-top: 0.0625em solid #e9ecef; /* 1px */
}
.plan-actions.actions-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1em; /* 16px */
  border-top: 0.0625em solid #e9ecef; /* 1px */
}

.action-btn {
  width: 100%;
  padding: 0.5em 1em;
  border: none;
  background: white;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0 !important;
}
.action-btn:hover {
  background: #014550;
  color: white;
  border-color: #014550;
}
.action-btn .eye-icon {
  font-size: 1.125em; /* 18px */
}

/* Plan Details */
.plan-details {
  padding: 1.25em; /* 20px */
  background: white;
  border-top: 0.0625em solid #e9ecef; /* 1px */
}

.plan-meals {
  margin-bottom: 1.25em; /* 20px */
}

.meal-row {
  margin-bottom: 1em; /* 16px */
}

.meal-header {
  font-weight: 600;
  color: #014550;
  font-size: 0.875em; /* 14px */
  margin-bottom: 0.5em; /* 8px */
}

.meal-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 0.5em;
}
.meal-item-row.empty {
  opacity: 0.6;
  font-style: italic;
}

.meal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25em; /* 4px */
}

.meal-name {
  font-size: 0.875em; /* 14px */
  color: #333;
  font-weight: 500;
}

.meal-description {
  color: #888;
  font-size: 0.75em; /* 12px */
  font-style: italic;
}

.meal-controls {
  display: flex;
  align-items: center;
  gap: 0.75em; /* 12px */
}

.portion-controls {
  display: flex;
  align-items: center;
  gap: 0.5em; /* 8px */
  background: white;
  padding: 0.25em 0.5em; /* 4px 8px */
  border-radius: 0.375em; /* 6px */
  border: 0.0625em solid #dee2e6; /* 1px */
}

.portion-btn {
  width: 1.5em; /* 24px */
  height: 1.5em; /* 24px */
  border: none;
  background: #014550;
  color: white;
  border-radius: 0.25em; /* 4px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875em; /* 14px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.portion-count {
  font-weight: 600;
  color: #014550;
  min-width: 1.25em; /* 20px */
  text-align: center;
  font-size: 0.875em; /* 14px */
}

.remove-item-btn {
  width: 1.5em; /* 24px */
  height: 1.5em; /* 24px */
  border: 0.0625em solid #014550; /* 1px */
  background: white;
  color: #014550;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15em; /* 16px */
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}
.remove-item-btn:hover {
  background: #014550;
  color: white;
}

/* Bottom Actions */
.save-changes-btn {
  padding: 0.625em 1.25em; /* 10px 20px */
  border: 0.125em solid #7ed8c6; /* 2px */
  background: #7ed8c6;
  color: white;
  border-radius: 0.5em; /* 8px */
  font-size: 0.875em; /* 14px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.save-changes-btn:hover {
  background: #6bc2b0;
  border-color: #6bc2b0;
  transform: translateY(-0.0625em); /* -1px */
}

.plan-actions-right {
  display: flex;
  gap: 0.5em; /* 8px */
}

.pdf-btn,
.delete-btn {
  padding: 0.5em 1em; /* 8px 16px */
  border: 0.0625em solid #dee2e6; /* 1px */
  background: white;
  border-radius: 0.375em; /* 6px */
  font-size: 0.75em; /* 12px */
  cursor: pointer;
  transition: all 0.3s ease;
}

.pdf-btn {
  color: #014550;
  border-color: #014550;
}
.pdf-btn:hover {
  background: #014550;
  color: white;
}

.delete-btn {
  color: #dc3545;
  border-color: #dc3545;
}
.delete-btn:hover {
  background: #dc3545;
  color: white;
}

/* No Plans Message */
.no-plans-message {
  text-align: center;
  padding: 3.75em 1.25em; /* 60px 20px */
  background: #f8f9fa;
  border-radius: 0.75em; /* 12px */
  border: 0.125em dashed #dee2e6; /* 2px */
}
.no-plans-message .no-plans-icon {
  font-size: 3em; /* 48px */
  margin-bottom: 1.25em; /* 20px */
}
.no-plans-message h3 {
  color: #014550;
  margin: 0 0 0.9375em 0; /* 15px */
  font-size: 1.25em; /* 20px */
}
.no-plans-message p {
  color: #666;
  margin: 0;
  font-size: 1em; /* 16px */
}
.no-plans-message a {
  color: #7ed8c6;
  text-decoration: none;
  font-weight: 600;
}
.no-plans-message a:hover {
  text-decoration: underline;
}

/* ===== SIDEBAR MEAL PLANS STYLES ===== */
/* Account Dropdown Arrow */
.account_dropdown_link:hover .account_dd_link_arrow {
  opacity: 1;
}

.account_dropdown_link.w--current .account_dd_link_arrow {
  opacity: 1;
}

/* Sidebar Moje jadłospisy */
.my-meal-plans-sidebar {
  position: relative;
  width: 100%;
  background: white;
  border: 0.0625em solid #e9ecef; /* 1px */
  border-radius: 0.5em; /* 8px */
  padding: 1.25em; /* 20px */
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1); /* 4px 12px */
  z-index: 100;
  margin-bottom: 1.25em; /* 20px */
}
.my-meal-plans-sidebar h3 {
  font-size: 1em; /* 16px */
  color: #014550;
  margin: 0 0 0.9375em 0; /* 15px */
  font-weight: 600;
  text-align: center;
}

.month-navigation {
  display: flex;
  flex-direction: column;
}

.month-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.0625em solid #dee2e6; /* 1px */
  text-decoration: none;
  color: #6c757d;
  font-size: 0.875em; /* 14px */
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  padding-bottom: 0.875em; /* 14px */
  margin-bottom: 0.875em; /* 14px */
}
.month-nav-item.disabled {
  color: #6c757d;
  border-bottom: 0.0625em solid #dee2e6; /* 1px */
  cursor: not-allowed;
  opacity: 0.6;
}
.month-nav-item.disabled:hover {
  background: #f8f9fa;
  color: #6c757d;
  transform: none;
}

.month-name {
  flex: 1;
  font-weight: 500;
}

.month-icon {
  font-size: 1.125em; /* 18px */
  margin-left: 0.5em; /* 8px */
}

.month-nav-item.current .month-icon::before {
  content: "📅";
}

.month-nav-item.disabled .month-icon::before {
  content: "🔒";
}

.program-waiting-info {
  background: #fff3cd;
  border: 0.0625em solid #ffeaa7; /* 1px */
  border-radius: 0.375em; /* 6px */
  padding: 0.9375em; /* 15px */
  margin-bottom: 1.25em; /* 20px */
  text-align: center;
}
.program-waiting-info .waiting-icon {
  font-size: 1.5em; /* 24px */
  margin-bottom: 0.625em; /* 10px */
  display: block;
}
.program-waiting-info h4 {
  margin: 0 0 0.5em 0; /* 8px */
  font-size: 0.875em; /* 14px */
  color: #856404;
  font-weight: 600;
}
.program-waiting-info p {
  margin: 0;
  font-size: 0.75em; /* 12px */
  color: #856404;
  line-height: 1.4;
}

/* ===== RESPONSIVE FOR SAVED PLANS & SIDEBAR ===== */
@media (max-width: 48em) {
  .my-meal-plans-sidebar {
    position: static;
    width: 100%;
    margin: 1.25em 0; /* 20px */
    transform: none;
    right: auto;
    top: auto;
  }
  .single .portions-control {
    align-items: center;
    padding: 6px;
    margin-top: 10px;
  }
  .single .portions-control * {
    font-size: 12px !important;
  }
  .single .meal-plan-sidebar {
    width: calc(100% - 30px);
    margin-left: 15px;
  }
  .month-navigation {
    flex-wrap: wrap;
  }
  .month-nav-item {
    flex: 1;
    min-width: calc(50% - 0.25em); /* 4px */
  }
  .meal-plans-header {
    flex-direction: column;
    text-align: center;
  }
  .meal-plans-header .meal-plans-icon {
    margin-right: 0;
    margin-bottom: 1em; /* 16px */
  }
  .plan-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75em; /* 12px */
  }
  .plan-summary {
    width: 100%;
  }
  .meal-item-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75em; /* 12px */
  }
  .meal-controls {
    width: 100%;
    justify-content: space-between;
  }
  .plan-actions-right {
    flex-direction: column;
    width: 100%;
  }
}



/* FORM MEDFILE  */.show-medfile-register-iframe, .add-to-cart-femimed {
  display: none;
}
.show-medfile-register-iframe[data-slot], .add-to-cart-femimed[data-slot] {
  display: block;
}

.doc_calendar_time_card.active {
  background: #c5facb;
}
.doc_calendar_time_card .slot-selector {
  cursor: pointer;
}

.after-choose-slot {
  display: none;
  padding-bottom: 2.6875em;
}
.after-choose-slot iframe {
  width: 100%;
  height: 1150px;
  border: 0;
}

.medfile-noresults {
  padding: 10px;
  background: #c5facb;
  border-left: 6px solid #014550;
}

.doc-not-available {
  border-radius: 25px;
  background: #c5facb;
  margin: 20px 0;
  padding: 15px;
  border-left: 32px solid #014550;
}

.medfile-noresults.calendar-noresults {
  background: #fff;
  border: 0;
  padding: 30px 30px 50px;
  margin-top: -60px;
  text-align: center;
  font-size: 1vw;
  line-height: 1.6;
}

.medfile-booking-form-container__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.medfile-booking-form-container__top img {
  width: 7em;
  height: auto;
}

form#medfile-booking-form label {
  font-weight: 500;
  margin-bottom: 0.7em;
}

form#medfile-booking-form .form-row {
  margin-bottom: 0;
}

/* Style dla formularza Medfile - ZASTĘPUJE KALENDARZ */
#medfile-booking-form-container {
  background: white;
  border-radius: 0.625rem;
  padding: 1.875rem;
  margin: 1.25rem 0;
  border: 0.0625rem solid #ddd;
  width: calc(100% - 1.875rem);
  margin-left: 0.9375rem;
}

#medfile-booking-form-container h3 {
  margin-top: 0;
  color: #04dd8f;
  text-align: center;
}

.form-row {
  display: flex;
  gap: 0.9375rem;
  margin-bottom: 0.9375rem;
}

.form-field {
  flex: 1;
  margin-bottom: 0.9375rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.3125rem;
  font-weight: bold;
  color: #014550;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.625rem;
  border: 0.0625rem solid #ddd;
  border-radius: 0.3125rem;
  font-size: 0.875rem;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: #04DD8F;
  outline: none;
}

.form-checkboxes {
  margin: 1.25rem 0;
}

.checkbox-field {
  display: flex;
  align-items: center;
  margin-bottom: 0.625rem;
}

.checkbox-field input {
  margin-right: 0.625rem;
  width: auto;
}

.form-buttons {
  display: flex;
  gap: 0.9375rem;
  justify-content: center;
  margin-top: 1.5625rem;
}

.button-secondary {
  background: #f5f5f5;
  color: #666;
  border: 0.0625rem solid #ddd;
  padding: 0.75rem 1.5625rem;
  border-radius: 0.3125rem;
  cursor: pointer;
}

.button-primary {
  background: #014550;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5625rem;
  border-radius: 0.3125rem;
  cursor: pointer;
  font-weight: 400;
  transition: all 0.3s ease;
}

.button-primary:hover {
  background: #03c27d;
}

.button-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#booking-messages {
  margin-top: 0.9375rem;
  padding: 0.625rem;
  border-radius: 0.3125rem;
}

#booking-messages.success {
  background: #d4edda;
  color: #155724;
  border: 0.0625rem solid #c3e6cb;
}

#booking-messages.error {
  background: #f8d7da;
  color: #721c24;
  border: 0.0625rem solid #f5c6cb;
}

.cancel-visit-btn {
  background: #ff4444;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.3s;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.cancel-visit-btn:hover {
  background: #cc0000;
}

@media (max-width: 48rem) {
  .form-row {
      flex-direction: column;
      gap: 0;
  }
  
  #medfile-booking-form-container {
      padding: 1.25rem;
      margin: 0.625rem 0;
  }
}

a.patient-visit-btn {
  background: #024550;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.3s;
  text-align: center;
  display: block;
  margin: 0 auto;
  color: #fff;
  text-decoration: none;
}

.visit_buttons_wrap {
  display: flex;
  gap: 0.4em;
}

a.patient-visit-btn:hover {
  background: #04dd8f;
}
/* END FORM MEDFILE  */