:root {
  --tuning-font: "Segoe UI", Tahoma, Arial, sans-serif;
  --tuning-ink: #17211d;
  --tuning-muted: #66736e;
  --tuning-green: #075f45;
  --tuning-green-2: #0f7a58;
  --tuning-mint: #e6f4ee;
  --tuning-coral: #f2785c;
  --tuning-gold: #d8ab58;
  --tuning-border: rgba(23, 33, 29, 0.1);
  --tuning-shadow: 0 18px 50px rgba(22, 32, 29, 0.12);
  --tuning-soft-shadow: 0 10px 26px rgba(22, 32, 29, 0.08);
  --f7-navbar-height: 68px;
  --f7-theme-color: var(--tuning-green);
  --f7-button-border-radius: 8px;
}

html,
body,
#app {
  background: #f7f8f4;
  color: var(--tuning-ink);
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--tuning-font) !important;
  letter-spacing: 0;
}

.view,
.views,
.page,
.page-content {
  max-width: 100vw;
  overflow-x: hidden !important;
}

.page,
.page-content {
  background:
    radial-gradient(circle at top left, rgba(242, 120, 92, 0.1), transparent 260px),
    linear-gradient(180deg, #fbfcf8 0%, #f2f5ef 100%) !important;
}

.container {
  width: min(100% - 28px, 680px);
  margin-inline: auto;
  max-width: 100%;
}

.page-content.content-area {
  padding-top: 24px;
  padding-bottom: 110px !important;
}

/* Ensure any page that has a navbar clears the navbar properly on all screens including safe-areas */
.navbar ~ .page-content,
.navbar ~ .page-content.content-area,
.page:has(.navbar) .page-content,
.page:has(.navbar) .page-content.content-area,
.page[data-name="PayNowNew"] .page-content,
.page[data-name="Consultation"] .page-content,
.page[data-name="BMICAL"] .page-content {
  padding-top: calc(var(--f7-navbar-height, 68px) + var(--f7-safe-area-top, env(safe-area-inset-top, 0px)) + 20px) !important;
}

#BMIIMG,
img#BMIIMG {
  display: block !important;
  margin: 0 auto !important;
  max-height: 190px !important;
  width: auto !important;
  object-fit: contain !important;
}

.loader-screen {
  background: #fbfcf8 !important;
}

.loader-screen img {
  max-width: 180px;
  filter: drop-shadow(0 18px 30px rgba(7, 95, 69, 0.18));
}

.main-logo.center img,
.logo-icon img {
  max-width: 220px;
  height: auto;
}

.welcome-screen .page-content,
.page:not(.page-home) > .page-content:first-child {
  min-height: 100%;
}

.welcome-screen .welcome-inner {
  min-height: 100%;
  justify-content: center;
  gap: 18px;
  padding: 36px 0 54px;
}

.welcome-screen .title {
  color: var(--tuning-ink) !important;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 14px;
}

.tuning-back-home {
  text-align: center;
  margin: 14px 0 22px;
}

.tuning-back-home a {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tuning-green);
  text-decoration: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--tuning-border);
  box-shadow: var(--tuning-soft-shadow);
}

.tuning-back-home i {
  font-size: 22px;
}

.button,
button.button,
a.button {
  font-family: var(--tuning-font) !important;
  min-height: 48px;
  border-radius: 8px !important;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none !important;
  box-shadow: none;
}

.button-fill,
.button-green,
.button.button-fill {
  background: linear-gradient(135deg, var(--tuning-green), var(--tuning-green-2)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(7, 95, 69, 0.22);
}

.button-fill:active,
.button-green:active {
  transform: translateY(1px);
}

.list ul,
.block-strong,
.card,
.elevation-demo,
.item-content.item-input,
.segmented.segmented-strong {
  border-radius: 8px !important;
}

.list ul,
.block-strong,
.elevation-demo {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--tuning-border);
  box-shadow: var(--tuning-soft-shadow);
}

.list .item-inner:after,
.list ul:before,
.list ul:after,
.block-strong:before,
.block-strong:after {
  display: none !important;
}

.item-input-wrap input,
.item-input-outline .item-input-wrap input,
input[type="text"],
input[type="password"],
input[type="number"] {
  min-height: 48px;
  border-radius: 8px !important;
  border: 1px solid var(--tuning-border) !important;
  background: #fff !important;
  color: var(--tuning-ink) !important;
  padding: 0 14px !important;
  font-size: 15px !important;
}

.item-title,
.item-label,
.item-floating-label {
  color: var(--tuning-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.top-bar {
  font-family: var(--tuning-font) !important;
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  min-height: 106px;
  padding: 14px 16px 16px;
  background:
    linear-gradient(135deg, rgba(7, 95, 69, 0.98), rgba(18, 137, 96, 0.96));
  border-radius: 8px;
  box-shadow: var(--tuning-shadow);
  color: #fff;
  margin-bottom: 18px;
}

.top-bar:after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -64px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.top-bar .notification-bar {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  color: #fff !important;
  text-decoration: none;
}

.top-bar .text,
.top-bar .title {
  color: #fff !important;
}

.top-bar .info,
.top-bar .info * {
  color: #fff !important;
}

.top-bar .text {
  opacity: 0.82;
  font-size: 13px;
}

.page:not([data-name="HomePage"]) .top-bar .text {
  font-size: 0 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.page:not([data-name="HomePage"]) .top-bar .text:after {
  content: "Welcome";
  font-size: 13px !important;
  opacity: 0.92;
}

html[lang="ar"] .page:not([data-name="HomePage"]) .top-bar .text:after {
  content: "مرحبا";
  font-size: 13px !important;
  opacity: 0.92;
}

.page[data-name="PayNowNew"] .top-bar .text:after,
.page[data-name="Consultation"] .top-bar .text:after,
.page[data-name="second_page"] .top-bar .text:after,
.page-profile-menu .top-bar .text:after,
#consultationGreeting:after,
.consultation-greeting:after {
  content: "" !important;
  display: none !important;
}

.page[data-name="PayNowNew"] .top-bar,
.page[data-name="Consultation"] .top-bar {
  min-height: auto !important;
  padding: 16px 18px !important;
  margin-top: 4px !important;
  margin-bottom: 16px !important;
  border-radius: 16px !important;
}

.page[data-name="PayNowNew"] .top-bar .row,
.page[data-name="Consultation"] .top-bar .row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

.page[data-name="PayNowNew"] .top-bar .row > .col:first-child,
.page[data-name="Consultation"] .top-bar .row > .col:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.page[data-name="PayNowNew"] .top-bar .text,
.page[data-name="Consultation"] .top-bar .text {
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  display: block !important;
  opacity: 1 !important;
  white-space: normal !important;
}

.page[data-name="PayNowNew"] .top-bar .title,
.page[data-name="Consultation"] .top-bar .title {
  margin: 2px 0 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  display: block !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15) !important;
}

.page[data-name="PayNowNew"] .tuning-top-actions,
.page[data-name="Consultation"] .tuning-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 0 !important;
  flex: 0 0 auto !important;
}

.page[data-name="PayNowNew"] .tuning-icon-action,
.page[data-name="PayNowNew"] .tuning-text-action,
.page[data-name="Consultation"] .tuning-icon-action,
.page[data-name="Consultation"] .tuning-text-action {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

.page[data-name="PayNowNew"] .tuning-icon-action,
.page[data-name="Consultation"] .tuning-icon-action {
  width: 34px !important;
}

.top-bar .title {
  display: block !important;
  margin: 22px 0 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
  text-transform: capitalize;
}

.page-home .top-bar .notification-bar .info h2.title,
.page-home .top-bar .notification-bar h2.title,
.page-home .top-bar h2.title {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
}

.top-bar .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.top-bar .row > .col:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.page[data-name="HomePage"] .top-bar,
.page-profile-menu .top-bar,
.page[data-name="second_page"] .top-bar {
  min-height: 76px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.page[data-name="HomePage"] .top-bar:after,
.page-profile-menu .top-bar:after,
.page[data-name="second_page"] .top-bar:after {
  right: -62px;
  bottom: -92px;
  width: 148px;
  height: 148px;
}

.page[data-name="HomePage"] .top-bar .text,
.page-profile-menu .top-bar .text,
.page[data-name="second_page"] .top-bar .text {
  display: inline-block;
  width: auto !important;
  max-width: 100%;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 0.92;
  white-space: nowrap;
}

.page[data-name="HomePage"] .top-bar .title,
.page-profile-menu .top-bar .title,
.page[data-name="second_page"] .top-bar .title {
  margin-top: 12px;
  font-size: 20px !important;
  line-height: 1 !important;
}

.tuning-top-actions {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
}

.tuning-top-actions > button {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.tuning-icon-action,
.tuning-text-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 10px !important;
  padding: 0 !important;
  font-family: var(--tuning-font) !important;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-sizing: border-box !important;
}

.tuning-icon-action img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
  margin: auto !important;
}

.tuning-text-action i {
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto !important;
}

.tuning-text-action:not(.tuning-lang-action) span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.consultation-option-card {
  align-content: center;
  cursor: pointer;
  margin: 0 auto 12px;
  max-width: 360px;
  text-align: center;
  width: 100%;
}

.consultation-option-card img {
  aspect-ratio: 1648 / 914;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(10, 31, 25, 0.11);
  display: block;
  height: auto;
  max-height: 190px;
  object-fit: cover;
  width: 100%;
}

.consultation-option-card:active img {
  transform: translateY(1px);
}

.title-bar {
  margin: 10px 0 8px;
}

.title-bar .dz-title,
.page-home h2.title {
  color: var(--tuning-ink) !important;
  font-size: 20px;
  line-height: 1.2;
}

.page-home .content-area > .container > .row {
  align-items: center;
  gap: 16px;
  margin: 22px 0 8px;
}

.home-dashboard-row {
  margin: 18px 0 8px;
  width: 100%;
}

.home-dashboard-row > .row {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 !important;
  width: 100%;
}

.home-dashboard-row > .row > .col {
  min-width: 0;
  width: auto !important;
}

.home-action-list {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  justify-items: stretch;
  justify-self: stretch;
  width: 100% !important;
}

.home-action-list br {
  display: none;
}

.home-action-list .button {
  align-items: center;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 900;
  height: 46px !important;
  justify-content: center;
  line-height: 1.15 !important;
  min-height: 46px !important;
  min-width: 0;
  overflow: visible !important;
  padding: 0 14px !important;
  text-align: center;
  white-space: nowrap;
  width: 100% !important;
}

.page-home .block.block-strong.text-align-center {
  padding: 12px !important;
  margin-top: 6px !important;
  margin-bottom: 20px !important;
}

.page-home .block.block-strong.text-align-center .row {
  gap: 8px;
  margin: 0 !important;
}

.page-home .block.block-strong.text-align-center .col {
  border: 0 !important;
  background: #fff;
  border-radius: 8px;
  padding: 10px 8px;
  box-shadow: inset 0 0 0 1px var(--tuning-border);
}

.page-home .block.block-strong.text-align-center p {
  height: auto !important;
  margin: 0 0 7px;
  color: var(--tuning-ink);
  font-size: 11px !important;
  line-height: 1.25;
}

.page-home .block.block-strong.text-align-center p:last-child {
  margin-bottom: 0;
  color: var(--tuning-green);
  font-weight: 900;
}

.page-home .block.block-strong.text-align-center a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--tuning-green) !important;
  text-decoration: none;
}

.page-home .block.block-strong.text-align-center a p {
  margin: 0 !important;
}

.page-home .block.block-strong.text-align-center a span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px !important;
  border-radius: 999px;
  background: var(--tuning-green) !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.subscription-summary {
  margin: 10px 0 6px;
}

.subscription-summary-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.subscription-summary-heading h2 {
  color: var(--tuning-ink) !important;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.subscription-status-card {
  background: #fff;
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(10, 31, 25, 0.07);
  display: grid;
  gap: 10px;
  padding: 12px;
}

.subscription-label {
  color: var(--tuning-muted);
  display: block;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: none;
}

.subscription-status-top {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.subscription-plan-name {
  background: #f6fbf8;
  border: 1px solid #e3efe9;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.subscription-plan-name strong {
  color: var(--tuning-green);
  display: block;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.subscription-muted {
  color: var(--tuning-muted);
  display: block;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
}

.subscription-off-days {
  align-items: flex-start;
  color: var(--tuning-ink);
  display: grid;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
}

.subscription-off-days i {
  align-items: center;
  background: #e9f4ef;
  border-radius: 999px;
  color: var(--tuning-green);
  display: inline-flex;
  font-size: 9px;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.subscription-off-days span {
  color: var(--tuning-ink);
  display: block;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

.subscription-pay-action a p,
.subscription-pay-action > span p {
  margin: 0 !important;
}

/* Informational status badge (when plan is Active or non-clickable) */
.subscription-pay-action > span,
.subscription-pay-action > span p,
.subscription-status-badge {
  align-items: center !important;
  background: #e9f4ef !important;
  border-radius: 999px !important;
  color: var(--tuning-green) !important;
  display: inline-flex !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  min-height: 28px !important;
  padding: 2px 14px !important;
  margin: 0 !important;
}

/* Pay Now Action Button - Large, prominent, solid brand green with elevation */
.subscription-pay-action a,
.subscription-pay-action .btn-pay-now {
  align-items: center !important;
  background: linear-gradient(135deg, #00573c 0%, #086b4b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 87, 60, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  gap: 7px !important;
  justify-content: center !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 38px !important;
  padding: 0 20px !important;
  text-decoration: none !important;
  text-transform: none !important;
  touch-action: manipulation !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.subscription-pay-action a:hover,
.subscription-pay-action .btn-pay-now:hover {
  background: linear-gradient(135deg, #00452f 0%, #065b3f 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 87, 60, 0.42) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.subscription-pay-action a:active,
.subscription-pay-action .btn-pay-now:active {
  box-shadow: 0 2px 8px rgba(0, 87, 60, 0.25) !important;
  transform: scale(0.96) !important;
}

.subscription-pay-action a p,
.subscription-pay-action a span,
.subscription-pay-action a center {
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  gap: 6px !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: auto !important;
  padding: 0 !important;
  width: auto !important;
}

.subscription-pay-action a i,
.subscription-pay-action .btn-pay-now i {
  color: #ffffff !important;
  font-size: 13px !important;
}

.page-profile-menu .top-bar {
  margin-bottom: 22px;
}

.profile-section-title {
  margin: 0 0 14px;
}

.profile-section-title span {
  display: block;
  color: var(--tuning-ink);
  font-size: 15px !important;
  font-weight: 900;
  line-height: 1.2;
}

.profile-section-title p {
  margin: 6px 0 0;
  color: var(--tuning-muted);
  font-size: 11px !important;
  line-height: 1.45;
}

.page[data-name="PayNowNew"] .payment-summary-card {
  padding: 24px 28px 26px !important;
}

.page[data-name="PayNowNew"] .payment-amount-row {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.9fr);
  height: auto !important;
  margin-bottom: 26px;
}

.page[data-name="PayNowNew"] .payment-amount-label {
  color: var(--tuning-green);
  display: block !important;
  font-size: 19px !important;
  font-weight: 700;
  line-height: 1.25;
  width: auto !important;
}

.page[data-name="PayNowNew"] .payment-amount-box {
  align-items: center;
  color: var(--tuning-green) !important;
  display: flex !important;
  font-size: 20px !important;
  font-weight: 900;
  height: 58px !important;
  justify-content: center;
  line-height: 1.2 !important;
  margin: 0 !important;
  min-width: 0;
  padding: 0 18px;
  width: auto !important;
}

.page[data-name="PayNowNew"] .payment-coupon-row {
  margin: 0 !important;
}

@media (max-width: 420px) {
  .page[data-name="PayNowNew"] .payment-summary-card {
    padding: 20px 18px 22px !important;
  }

  .page[data-name="PayNowNew"] .payment-amount-row {
    gap: 14px;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }
}

.profile-action-list {
  display: grid;
  gap: 10px;
  margin-bottom: 100px;
}

.profile-action-card {
  display: grid;
  grid-template-columns: 46px 1fr 18px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--tuning-border);
  box-shadow: var(--tuning-soft-shadow);
  color: var(--tuning-ink) !important;
  text-decoration: none;
}

.profile-action-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--tuning-green);
  color: #fff;
}

.profile-action-icon i {
  font-size: 23px;
}

.profile-action-copy {
  min-width: 0;
}

.profile-action-copy strong {
  display: block;
  color: var(--tuning-ink);
  font-size: 13px !important;
  line-height: 1.2;
  margin-bottom: 4px;
}

.profile-action-copy small {
  display: block;
  color: var(--tuning-muted);
  font-size: 10px !important;
  line-height: 1.35;
  white-space: normal;
}

.profile-action-card > .fas {
  color: var(--tuning-muted);
  font-size: 12px;
}

.swiper {
  max-width: 100%;
}

.page-home .swiper,
.page-home .main-swiper,
.page-home .categories-swiper,
.page-home .overlay-swiper1 {
  overflow: hidden !important;
}

.swiper-slide,
.categories-swiper .swiper-slide,
.main-swiper .swiper-slide {
  border-radius: 8px;
}

.segmented.segmented-strong {
  padding: 4px;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid var(--tuning-border);
  gap: 4px;
}

.segmented .button {
  border-radius: 8px !important;
  color: var(--tuning-green) !important;
}

.segmented .button-active,
.segmented .tab-link-active {
  background: var(--tuning-green) !important;
  color: #fff !important;
}

.navbar.navbar-style-1 {
  height: calc(var(--f7-navbar-height, 68px) + var(--f7-safe-area-top, env(safe-area-inset-top, 0px)));
  min-height: calc(var(--f7-navbar-height, 68px) + var(--f7-safe-area-top, env(safe-area-inset-top, 0px)));
  background: rgba(251, 252, 248, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tuning-border) !important;
}

.navbar.navbar-style-1 .navbar-inner {
  padding-inline: 16px;
  height: var(--f7-navbar-height, 68px);
  margin-top: var(--f7-safe-area-top, env(safe-area-inset-top, 0px));
}

.navbar.navbar-style-1 .title {
  color: var(--tuning-ink);
  font-size: 17px;
  font-weight: 900;
}

.navbar.navbar-style-1 a.link svg {
  width: 22px;
  height: 22px;
}

.navbar.navbar-style-1 a.link path {
  fill: var(--tuning-green) !important;
}

.tuning-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 520px);
  height: calc(66px + env(safe-area-inset-bottom));
  z-index: 10000060;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  align-items: center;
  padding: 7px 8px max(7px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(7, 95, 69, 0.14);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 16px 38px rgba(22, 32, 29, 0.18);
  backdrop-filter: blur(16px);
}

.tuning-nav-item {
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--tuning-muted);
  border-radius: 8px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  position: relative;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.tuning-nav-item span {
  font-family: var(--tuning-font) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.tuning-nav-item i {
  color: #7d8a85;
  font-size: 18px;
  transition: transform 0.18s ease, color 0.18s ease;
}

.tuning-nav-item:hover,
.tuning-nav-item:focus {
  color: var(--tuning-green);
}

.tuning-nav-item:hover i,
.tuning-nav-item:focus i {
  color: var(--tuning-green);
}

.tuning-nav-item.active {
  color: var(--tuning-green) !important;
  font-weight: 800;
  background: var(--tuning-mint);
}

.tuning-nav-item.active i {
  color: var(--tuning-green) !important;
  transform: translateY(-1px) scale(1.1);
}

.tuning-nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--tuning-green);
}

.tuning-nav-item:active {
  background: var(--tuning-mint);
  transform: scale(0.96);
}

.gauge {
  filter: drop-shadow(0 12px 24px rgba(7, 95, 69, 0.12));
}

.subscription-progress-col {
  align-self: stretch !important;
  display: flex !important;
  justify-self: center;
  width: 100% !important;
}

.subscription-progress-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tuning-border);
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(10, 31, 25, 0.08);
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: center !important;
  margin-inline: auto;
  max-width: 240px;
  min-height: 184px;
  padding: 14px 12px;
  width: 100%;
}

.subscription-progress-label {
  color: var(--tuning-muted);
  display: block;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1.2;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.subscription-progress-gauge {
  height: 136px !important;
  margin: 0 auto;
  max-width: 100% !important;
  width: 136px !important;
}

.subscription-progress-gauge svg {
  height: 136px !important;
  max-width: 100% !important;
  width: 136px !important;
}

.tuning-offer-slide {
  width: min(76vw, 230px) !important;
}

.tuning-offer-card {
  background: #fff;
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(10, 31, 25, 0.08);
  color: var(--tuning-ink) !important;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.tuning-offer-card img {
  aspect-ratio: 0.62 / 1;
  display: block;
  height: auto !important;
  object-fit: cover;
  object-position: center top;
  width: 100% !important;
}

.tuning-offer-badge {
  background: var(--tuning-green);
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  left: 8px;
  line-height: 1;
  padding: 6px 8px;
  position: absolute;
  top: 8px;
  z-index: 2;
}

.tuning-offer-copy {
  display: none !important;
}

.menu-status-panel {
  margin: 12px auto 100px !important;
  width: min(calc(100% - 28px), 620px);
}

.menu-status-content {
  padding-bottom: 120px !important;
}

.page-menu-status .menu-status-panel {
  margin-bottom: 120px !important;
}

.menu-status-guide {
  width: min(calc(100% - 28px), 620px);
  margin: 18px auto 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  box-shadow: var(--tuning-soft-shadow);
}

.menu-status-guide h3 {
  margin: 0 0 4px;
  color: var(--tuning-ink);
  font-size: 17px !important;
  line-height: 1.2;
}

.menu-status-guide p {
  margin: 0 0 12px;
  color: var(--tuning-muted);
  font-size: 12px !important;
  line-height: 1.45;
}

.menu-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f7f8f4;
  border: 1px solid var(--tuning-border);
  color: var(--tuning-ink);
  font-size: 10px !important;
  font-weight: 800;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.legend-select {
  background: #dfece6;
}

.legend-completed {
  background: #0f7a58;
}

.legend-incomplete {
  background: #f5be82;
}

.legend-delivered {
  background: #f5d7d2;
}

.legend-off {
  background: #cfd6d2;
}

.menu-status-hidden-inputs {
  display: none !important;
}

#demo-calendar-inline-container {
  overflow: hidden;
  min-height: 338px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--tuning-border);
  box-shadow: var(--tuning-soft-shadow);
}

.calendar,
.calendar-months,
.calendar-month,
.calendar-week-header {
  background: #fff !important;
}

.calendar-modal,
.calendar-modal .calendar,
.calendar-modal .calendar-months,
.calendar-modal .calendar-month,
.calendar-modal .calendar-week-header,
.calendar-popover,
.calendar-popover .calendar,
.calendar-popover .calendar-months,
.calendar-popover .calendar-month {
  background: #fff !important;
}

.calendar-modal,
.calendar-popover {
  pointer-events: auto !important;
  z-index: 10000100 !important;
}

.calendar-modal .calendar,
.calendar-modal .calendar-months,
.calendar-modal .calendar-month,
.calendar-modal .calendar-row,
.calendar-modal .calendar-day,
.calendar-modal .calendar-day-number,
.calendar-popover .calendar,
.calendar-popover .calendar-months,
.calendar-popover .calendar-month,
.calendar-popover .calendar-row,
.calendar-popover .calendar-day,
.calendar-popover .calendar-day-number {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

.calendar-modal .calendar-day,
.calendar-popover .calendar-day {
  background: #fff !important;
  background-image: none !important;
}

.calendar-modal .calendar-day-selected .calendar-day-number,
.calendar-popover .calendar-day-selected .calendar-day-number {
  background: var(--tuning-green) !important;
  color: #fff !important;
}

.calendar-modal .calendar-day-number,
.calendar-popover .calendar-day-number {
  cursor: pointer;
}

.calendar-modal.consultation-calendar,
.consultation-calendar.calendar-modal {
  box-sizing: border-box;
  width: min(calc(100vw - 32px), 380px) !important;
}

.calendar-modal.consultation-calendar .calendar,
.consultation-calendar.calendar {
  min-height: 390px !important;
}

.calendar-modal.consultation-calendar .calendar-months,
.calendar-modal.consultation-calendar .calendar-months-wrapper,
.consultation-calendar.calendar .calendar-months,
.consultation-calendar.calendar .calendar-months-wrapper {
  height: 292px !important;
  min-height: 292px !important;
}

.calendar-modal.consultation-calendar .calendar-month,
.consultation-calendar.calendar .calendar-month {
  height: 100% !important;
  min-height: 0 !important;
}

.calendar-modal.consultation-calendar .calendar-row,
.consultation-calendar.calendar .calendar-row {
  display: flex !important;
  height: 16.66666667% !important;
  min-height: 0;
}

.calendar-modal.consultation-calendar .calendar-day,
.consultation-calendar.calendar .calendar-day {
  align-items: center;
  display: flex !important;
  flex: 1 1 0;
  justify-content: center;
  min-height: 0;
}

.calendar-modal.consultation-calendar .calendar-day-number,
.consultation-calendar.calendar .calendar-day-number {
  align-items: center;
  color: var(--tuning-ink) !important;
  display: inline-flex !important;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.calendar-modal.consultation-calendar .calendar-day-disabled .calendar-day-number,
.consultation-calendar.calendar .calendar-day-disabled .calendar-day-number {
  color: rgba(23, 33, 29, 0.34) !important;
}

.calendar-sheet.consultation-calendar {
  background: #fff !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -18px 40px rgba(10, 31, 25, 0.18);
  max-height: calc(100vh - 84px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10000100 !important;
}

.calendar-sheet.consultation-calendar .calendar-header {
  padding: 14px 18px 4px;
}

.calendar-sheet.consultation-calendar .calendar-months,
.calendar-sheet.consultation-calendar .calendar-months-wrapper {
  height: 292px !important;
  min-height: 292px !important;
}

.calendar-sheet.consultation-calendar .calendar-month {
  height: 100% !important;
  min-height: 0 !important;
}

.calendar-sheet.consultation-calendar .calendar-row {
  display: flex !important;
  height: 16.66666667% !important;
  min-height: 0;
}

.calendar-sheet.consultation-calendar .calendar-day {
  align-items: center;
  display: flex !important;
  flex: 1 1 0;
  justify-content: center;
  min-height: 0;
}

.calendar-sheet.consultation-calendar .calendar-day-number {
  align-items: center;
  color: var(--tuning-ink) !important;
  display: inline-flex !important;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.calendar-sheet.consultation-calendar .calendar-day-selected .calendar-day-number {
  background: var(--tuning-green) !important;
  color: #fff !important;
}

.calendar-sheet.consultation-calendar .calendar-day-disabled .calendar-day-number {
  color: rgba(23, 33, 29, 0.34) !important;
}

.calendar-modal.program-start-calendar {
  box-sizing: border-box;
  max-height: calc(100vh - 110px);
  width: min(calc(100vw - 36px), 380px) !important;
}

.calendar-modal.program-start-calendar .calendar-months,
.calendar-modal.program-start-calendar .calendar-months-wrapper {
  height: 292px !important;
  min-height: 292px !important;
}

.calendar-modal.program-start-calendar .calendar-month {
  height: 100% !important;
  min-height: 0 !important;
}

.calendar-modal.program-start-calendar .calendar-row {
  display: flex !important;
  height: 16.66666667% !important;
  min-height: 0;
}

.calendar-modal.program-start-calendar .calendar-day {
  align-items: center;
  display: flex !important;
  flex: 1 1 0;
  justify-content: center;
  min-height: 0;
}

.calendar-modal.program-start-calendar .calendar-day-number {
  align-items: center;
  color: var(--tuning-ink) !important;
  display: inline-flex !important;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.calendar-modal.program-start-calendar .calendar-day-disabled .calendar-day-number {
  color: rgba(23, 33, 29, 0.34) !important;
}

.calendar-sheet.program-start-calendar {
  background: #fff !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -18px 40px rgba(10, 31, 25, 0.18);
  max-height: calc(100vh - 84px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10000100 !important;
}

.calendar-sheet.program-start-calendar .calendar-header {
  padding: 14px 18px 4px;
}

.calendar-sheet.program-start-calendar .calendar-months,
.calendar-sheet.program-start-calendar .calendar-months-wrapper {
  height: 292px !important;
  min-height: 292px !important;
}

.calendar-sheet.program-start-calendar .calendar-month {
  height: 100% !important;
}

.calendar-sheet.program-start-calendar .calendar-row {
  height: 16.66666667% !important;
}

.calendar-sheet.program-start-calendar .calendar-day-number {
  color: var(--tuning-ink) !important;
  font-weight: 900;
}

.calendar-sheet.program-start-calendar .calendar-day-selected .calendar-day-number {
  background: var(--tuning-green) !important;
  color: #fff !important;
}

.calendar-custom-toolbar {
  background: var(--tuning-green) !important;
  color: #fff;
  min-height: 48px;
}

.calendar-custom-toolbar .link,
.calendar-custom-toolbar .center {
  color: #fff !important;
  font-weight: 900;
}

.calendar-custom-toolbar .center {
  font-size: 16px;
}

.calendar-day {
  border-color: rgba(23, 33, 29, 0.08) !important;
  min-height: 46px;
}

.calendar-day-number {
  color: var(--tuning-ink);
  font-weight: 800;
  font-size: 15px;
}

.COMPLETED,
.SELECT,
.DELIVERED,
.INCOMPLETE,
.OFF {
  background-size: 30px 30px !important;
  background-position: center 17px !important;
  position: relative;
}

.COMPLETED .calendar-day-number,
.SELECT .calendar-day-number,
.DELIVERED .calendar-day-number,
.INCOMPLETE .calendar-day-number,
.OFF .calendar-day-number {
  position: relative;
  z-index: 1;
  margin: 0 auto !important;
  text-align: center !important;
  color: var(--tuning-ink) !important;
  font-size: 12px !important;
  font-weight: 900;
}

.COMPLETED:after,
.SELECT:after,
.DELIVERED:after,
.INCOMPLETE:after,
.OFF:after {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  z-index: 1;
  text-align: center;
  color: var(--tuning-ink);
  font-family: var(--tuning-font);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  text-transform: capitalize !important;
}

.COMPLETED:after {
  content: "Done";
  color: #fff;
}

.SELECT:after {
  content: "Select";
}

.DELIVERED:after {
  content: "Delivered";
}

.INCOMPLETE:after {
  content: "Open";
}

.OFF:after {
  content: "Off";
}

.COMPLETED {
  background-color: #0f7a58 !important;
}

.SELECT {
  background-color: #dfece6 !important;
}

.DELIVERED {
  background-color: #f5d7d2 !important;
}

.INCOMPLETE {
  background-color: #f5be82 !important;
}

.OFF {
  background-color: #e4e7e4 !important;
}

.page-menu-status #demo-calendar-inline-container {
  min-height: 356px;
}

.page-menu-status .calendar-week-header {
  border-bottom: 1px solid var(--tuning-border);
  color: var(--tuning-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: capitalize;
}

.page-menu-status .calendar-day {
  align-items: stretch;
  background-image: none !important;
  border-color: #dfe7e2 !important;
  min-height: 52px !important;
  overflow: hidden;
  padding: 0 !important;
}

.page-menu-status .calendar-day-number {
  align-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--tuning-ink) !important;
  display: flex !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  height: auto !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100% !important;
}

.page-menu-status .COMPLETED,
.page-menu-status .SELECT,
.page-menu-status .DELIVERED,
.page-menu-status .INCOMPLETE,
.page-menu-status .OFF {
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 0 !important;
}

.page-menu-status .COMPLETED {
  background-color: #0f7a58 !important;
}

.page-menu-status .SELECT {
  background-color: #f2f8f5 !important;
}

.page-menu-status .DELIVERED {
  background-color: #e9f4ef !important;
}

.page-menu-status .INCOMPLETE {
  background-color: #fff5e9 !important;
}

.page-menu-status .OFF {
  background-color: #eef1ef !important;
}

.page-menu-status .COMPLETED .calendar-day-number {
  color: #fff !important;
}

.page-menu-status .COMPLETED:after,
.page-menu-status .SELECT:after,
.page-menu-status .DELIVERED:after,
.page-menu-status .INCOMPLETE:after,
.page-menu-status .OFF:after {
  align-items: center;
  border-radius: 999px;
  bottom: 6px !important;
  display: inline-flex;
  font-size: 7px !important;
  font-weight: 900;
  height: 15px;
  justify-content: center;
  left: 5px !important;
  line-height: 1 !important;
  max-width: calc(100% - 10px);
  overflow: hidden;
  padding: 0 5px;
  right: auto !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-menu-status .COMPLETED:after {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  content: "Done";
}

.page-menu-status .SELECT:after {
  background: #dcebe4;
  color: var(--tuning-green);
  content: "Select";
}

.page-menu-status .DELIVERED:after {
  background: #cfe8dc;
  color: var(--tuning-green);
  content: "Delivered";
}

.page-menu-status .INCOMPLETE:after {
  background: #f7d8b2;
  color: #7a4b12;
  content: "Open";
}

.page-menu-status .OFF:after {
  background: #d9dfdc;
  color: #66736d;
  content: "Off";
}

.page-menu-status .navbar.menu-status-navbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-menu-status .menu-status-navbar .navbar-inner {
  justify-content: center;
}

.page-menu-status .menu-status-navbar .title {
  color: var(--tuning-ink) !important;
  font-size: 15px !important;
  font-weight: 900;
}

.page-menu-status .menu-status-navbar .menu-status-back {
  color: var(--tuning-green) !important;
  left: 12px;
  position: absolute;
}

.page-menu-status .menu-status-content {
  padding: 18px 14px 110px !important;
}

.menu-status-shell {
  margin: 0 auto;
  max-width: 720px;
  width: 100%;
}

.menu-status-heading {
  align-items: center;
  display: flex;
  gap: 14px;
  margin: 0 0 16px;
}

.menu-status-back-card {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(23, 33, 29, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 0 rgba(23, 33, 29, 0.1);
  color: var(--tuning-ink) !important;
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  text-decoration: none;
  width: 42px;
}

.menu-status-heading h1 {
  color: var(--tuning-ink) !important;
  font-size: 26px !important;
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
}

.menu-status-legend-cards {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 18px;
}

.status-legend-card {
  background: #fff;
  border: 1px solid rgba(23, 33, 29, 0.08);
  border-radius: 8px;
  box-shadow: 0 5px 0 rgba(23, 33, 29, 0.08);
  color: var(--tuning-ink);
  display: grid;
  font-size: 9px !important;
  font-weight: 900;
  gap: 7px;
  line-height: 1;
  min-height: 46px;
  padding: 8px 6px 7px;
  white-space: nowrap;
  text-transform: capitalize !important;
}

.status-legend-card b {
  border-radius: 999px;
  display: block;
  height: 6px;
  width: 100%;
}

.status-completed b,
.week-completed {
  background: #4f825e;
}

.status-incomplete b,
.week-incomplete {
  background: #d98c2d;
}

.status-delivered b {
  background: #b45a51;
}

.week-delivered {
  background: #b45a51;
}

.status-select b,
.week-select {
  background: #6279ad;
}

.status-off b,
.week-off {
  background: #c4bdad;
}

.week-empty {
  background: #ecefed;
}

.page-menu-status #demo-calendar-inline-container {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  overflow: visible;
}

.page-menu-status #demo-calendar-inline-container .calendar {
  background: transparent !important;
}

.page-menu-status .calendar-custom-toolbar {
  background: transparent !important;
  color: var(--tuning-ink);
  min-height: 50px;
}

.page-menu-status .calendar-custom-toolbar .toolbar-inner {
  align-items: center;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  padding: 0;
}

.page-menu-status .calendar-custom-toolbar .center {
  color: var(--tuning-ink) !important;
  font-size: 26px !important;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.page-menu-status .calendar-custom-toolbar .link {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(23, 33, 29, 0.08);
  border-radius: 8px;
  box-shadow: 0 7px 0 rgba(23, 33, 29, 0.08);
  color: #1783d4 !important;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  margin: 0;
  width: 38px;
}

.page-menu-status .calendar-custom-toolbar .right {
  justify-content: flex-end;
}

.page-menu-status .calendar-week-header {
  border-bottom: 0 !important;
  color: #817d72 !important;
  display: grid !important;
  font-size: 11px !important;
  font-weight: 900;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  line-height: 1;
  margin: 10px 0 8px;
  text-transform: capitalize;
}

.page-menu-status .calendar-week-day {
  text-align: center;
}

.page-menu-status .calendar-months {
  height: 512px !important;
  overflow: visible !important;
}

.page-menu-status .calendar-months-wrapper,
.page-menu-status .calendar-month {
  height: 100% !important;
}

.page-menu-status .calendar-row {
  display: grid !important;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: 16.66666667% !important;
  padding: 0 !important;
}

.page-menu-status .calendar-day {
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid rgba(23, 33, 29, 0.06) !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 0 rgba(23, 33, 29, 0.05);
  display: flex !important;
  height: calc(100% - 8px) !important;
  justify-content: flex-start !important;
  min-height: 66px !important;
  overflow: hidden;
  padding: 8px !important;
  position: relative;
  width: auto !important;
}

.page-menu-status .calendar-day-number {
  align-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--tuning-ink) !important;
  display: flex !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  height: auto !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative;
  text-align: center !important;
  width: 100% !important;
  z-index: 2;
}

.page-menu-status .calendar-day-prev .calendar-day-number,
.page-menu-status .calendar-day-next .calendar-day-number {
  color: rgba(23, 33, 29, 0.28) !important;
}

.page-menu-status .COMPLETED,
.page-menu-status .SELECT,
.page-menu-status .DELIVERED,
.page-menu-status .INCOMPLETE,
.page-menu-status .OFF {
  background-image: none !important;
}

.page-menu-status .COMPLETED {
  background: #4f825e !important;
  border-color: #4f825e !important;
}

.page-menu-status .SELECT {
  background: #e9eef8 !important;
  border-color: #d8e0f0 !important;
}

.page-menu-status .DELIVERED {
  background: #f3ddda !important;
  border-color: #e8c4bf !important;
}

.page-menu-status .INCOMPLETE {
  background: #fae7bf !important;
  border-color: #f1d8a7 !important;
}

.page-menu-status .OFF {
  background: #ede9df !important;
  border-color: #e1dccc !important;
}

.page-menu-status .COMPLETED .calendar-day-number {
  color: #fff !important;
}

.page-menu-status .COMPLETED:after,
.page-menu-status .SELECT:after,
.page-menu-status .DELIVERED:after,
.page-menu-status .INCOMPLETE:after,
.page-menu-status .OFF:after {
  background: transparent !important;
  bottom: 10px !important;
  box-shadow: none;
  display: block !important;
  font-size: 8px !important;
  font-weight: 900;
  height: auto;
  left: 8px !important;
  line-height: 1 !important;
  max-width: calc(100% - 16px);
  padding: 0;
  right: auto !important;
  text-align: left;
  text-transform: capitalize !important;
}

.page-menu-status .COMPLETED:after {
  color: #fff;
  content: "Done";
}

.page-menu-status .SELECT:after {
  color: #6279ad;
  content: "Select";
}

.page-menu-status .DELIVERED:after {
  color: #b45a51;
  content: "Delivered";
}

.page-menu-status .INCOMPLETE:after {
  color: #d98c2d;
  content: "Open";
}

.page-menu-status .OFF:after {
  color: #817d72;
  content: "Off";
}

.menu-week-completion-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(23, 33, 29, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 0 rgba(23, 33, 29, 0.06);
  margin: 12px 0 0;
  padding: 14px;
}

.menu-week-completion-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.menu-week-completion-top strong {
  color: var(--tuning-ink);
  font-size: 16px !important;
  font-weight: 900;
  line-height: 1.2;
}

.menu-week-completion-top span {
  color: #817d72;
  font-size: 12px !important;
  font-weight: 800;
  white-space: nowrap;
}

.menu-week-bars {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.week-bar {
  border-radius: 4px 4px 0 0;
  display: block;
  height: 24px;
}

@media (max-width: 520px) {
  .page-menu-status .menu-status-content {
    padding-inline: 12px !important;
  }

  .menu-status-legend-cards {
    gap: 5px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .status-legend-card {
    font-size: 8px !important;
    min-height: 42px;
    padding: 7px 4px 6px;
  }

  .page-menu-status .calendar-custom-toolbar .center {
    font-size: 22px !important;
  }

  .page-menu-status .calendar-months {
    height: 474px !important;
  }

  .page-menu-status .calendar-row {
    gap: 6px;
  }

  .page-menu-status .calendar-day {
    min-height: 60px !important;
    padding: 7px !important;
  }

  .page-menu-status .calendar-day-number {
    font-size: 15px !important;
  }
}

.page-menu-status.menu-status-reference .logo-icon,
.page-menu-status.menu-status-reference center,
.page-menu-status.menu-status-reference .menu-status-guide,
.page-menu-status.menu-status-reference .menu-status-panel,
.page-menu-status.menu-status-reference .menu-week-completion-card,
.page-menu-status.menu-status-reference .list {
  display: none !important;
}

.page-menu-status.menu-status-reference .menu-status-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  height: auto;
  margin: 2px 0 10px !important;
}

.page-menu-status.menu-status-reference .menu-status-logo img {
  display: block;
  height: auto;
  max-width: 132px;
  width: 34%;
}

.page-menu-status.menu-status-reference .menu-status-content {
  background: #f7faf6 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  padding: calc(var(--f7-safe-area-top, 0px) + 18px) 18px 112px !important;
}

.page-menu-status.menu-status-reference,
.page-menu-status.menu-status-reference *:not(.fa):not(.fas):not(.far):not(.fab):not(.f7-icons):not(.material-icons) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.page-menu-status.menu-status-reference .menu-status-shell {
  margin: 0 auto;
  max-width: 390px;
  width: 100%;
}

.page-menu-status.menu-status-reference .menu-status-heading {
  margin-bottom: 18px;
}

.page-menu-status.menu-status-reference .menu-status-heading h1 {
  color: #1f2421 !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}

.page-menu-status.menu-status-reference .menu-status-back-card {
  border-radius: 8px;
  box-shadow: 0 5px 0 rgba(23, 33, 29, 0.16);
  color: #006b4d !important;
  height: 42px;
  width: 42px;
}

.page-menu-status.menu-status-reference .menu-status-navbar,
.page-menu-status.menu-status-reference .menu-status-heading {
  display: none !important;
}

.page-menu-status.menu-status-reference .menu-status-legend-cards {
  gap: 6px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 18px;
}

.page-menu-status.menu-status-reference .status-legend-card {
  border-color: rgba(17, 54, 42, 0.08);
  box-shadow: none;
  color: #1f2421;
  font-size: 9px !important;
  min-height: 34px;
  padding: 6px 5px;
  white-space: nowrap;
}

.page-menu-status.menu-status-reference #demo-calendar-inline-container {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.page-menu-status.menu-status-reference .calendar {
  margin: 0 auto !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.page-menu-status.menu-status-reference .calendar-custom-toolbar {
  margin: 0 0 10px;
  min-height: 48px;
}

.page-menu-status.menu-status-reference .calendar-custom-toolbar .toolbar-inner {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.page-menu-status.menu-status-reference .calendar-custom-toolbar .center {
  color: #1f2421 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

.page-menu-status.menu-status-reference .calendar-custom-toolbar .link {
  box-shadow: 0 5px 0 rgba(17, 54, 42, 0.12);
  color: #1783d4 !important;
  height: 38px;
  width: 38px;
}

.page-menu-status.menu-status-reference .calendar-week-header {
  background: transparent;
  gap: 7px;
  margin: 14px 0 8px;
  padding: 0;
}

.page-menu-status.menu-status-reference .calendar-week-day {
  color: #817d72 !important;
  font-size: 11px !important;
  font-weight: 900;
  line-height: 1;
}

.page-menu-status.menu-status-reference .calendar-months {
  height: 540px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.page-menu-status.menu-status-reference .calendar-row {
  gap: 7px;
  height: 16.66666667% !important;
  margin-bottom: 7px !important;
  max-width: 100% !important;
  min-height: 0 !important;
}

.page-menu-status.menu-status-reference .calendar-day {
  align-items: center !important;
  justify-content: center !important;
  border-color: rgba(17, 54, 42, 0.045) !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 0 rgba(17, 54, 42, 0.045);
  cursor: pointer;
  display: flex !important;
  height: calc(147% - 8px) !important;
  margin-top: 5px !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: relative !important;
  text-align: center !important;
  touch-action: manipulation;
}

.page-menu-status.menu-status-reference .calendar-day-number {
  color: #1f2421 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: auto !important;
  height: auto !important;
}

.page-menu-status.menu-status-reference .calendar-day-prev,
.page-menu-status.menu-status-reference .calendar-day-next {
  opacity: 1 !important;
}

.page-menu-status.menu-status-reference .calendar-day-selected {
  background: #4f825e !important;
  border-color: #4f825e !important;
  box-shadow: inset 0 0 0 3px #1f2421, 0 5px 0 rgba(17, 54, 42, 0.045) !important;
  outline: 2px solid #fff !important;
  outline-offset: -6px;
}

.page-menu-status.menu-status-reference .calendar-day-selected .calendar-day-number {
  background: transparent !important;
  color: #fff !important;
}

.page-menu-status.menu-status-reference .COMPLETED {
  background: #4f825e !important;
  border-color: #4f825e !important;
}

.page-menu-status.menu-status-reference .COMPLETED .calendar-day-number {
  color: #fff !important;
}

.page-menu-status.menu-status-reference .SELECT {
  background: #dfe8fb !important;
  border-color: #d1dcf5 !important;
}

.page-menu-status.menu-status-reference .DELIVERED {
  background: #f0d2cd !important;
  border-color: #e3bbb4 !important;
}

.page-menu-status.menu-status-reference .INCOMPLETE {
  background: #f8d596 !important;
  border-color: #efc57c !important;
}

.page-menu-status.menu-status-reference .OFF {
  background: #e4dfd2 !important;
  border-color: #d6cfbf !important;
}

.page-menu-status.menu-status-reference .COMPLETED:after,
.page-menu-status.menu-status-reference .SELECT:after,
.page-menu-status.menu-status-reference .DELIVERED:after,
.page-menu-status.menu-status-reference .INCOMPLETE:after,
.page-menu-status.menu-status-reference .OFF:after {
  bottom: 4px !important;
  display: block !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  height: auto !important;
  left: 0 !important;
  right: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 2px !important;
  pointer-events: none !important;
  position: absolute !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-transform: capitalize !important;
  top: auto !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.page-menu-status.menu-status-reference .calendar-day-selected:after {
  color: #fff !important;
}

.page-menu-status.menu-status-reference .COMPLETED:after {
  content: "Done" !important;
}

.page-menu-status.menu-status-reference .SELECT:after {
  content: "Select" !important;
}

.page-menu-status.menu-status-reference .DELIVERED:after {
  content: "Delivered" !important;
}

.page-menu-status.menu-status-reference .INCOMPLETE:after {
  content: "Open" !important;
}

.page-menu-status.menu-status-reference .OFF:after {
  content: "Off" !important;
}

html[lang="ar"] .page-menu-status.menu-status-reference .COMPLETED:after {
  content: "تم" !important;
}

html[lang="ar"] .page-menu-status.menu-status-reference .SELECT:after {
  content: "اختيار" !important;
}

html[lang="ar"] .page-menu-status.menu-status-reference .DELIVERED:after {
  content: "وصل" !important;
}

html[lang="ar"] .page-menu-status.menu-status-reference .INCOMPLETE:after {
  content: "مفتوح" !important;
}

html[lang="ar"] .page-menu-status.menu-status-reference .OFF:after {
  content: "أوف" !important;
}

.page-menu-status.menu-status-reference .menu-week-completion-card {
  margin: 18px 0 0;
  padding: 18px 16px;
}

.page-menu-status.menu-status-reference .menu-week-completion-top {
  margin-bottom: 16px;
}

.page-menu-status.menu-status-reference .menu-week-bars {
  gap: 8px;
}

.page-menu-status.menu-status-reference .week-bar {
  height: 28px;
}

@media (min-width: 600px) and (max-width: 1024px) {
  .page-menu-status.menu-status-reference .menu-status-content {
    padding: calc(var(--f7-safe-area-top, 0px) + 18px) 24px 128px !important;
  }

  .page-menu-status.menu-status-reference .menu-status-shell {
    max-width: 390px;
  }

  .page-menu-status.menu-status-reference .menu-status-logo {
    margin-bottom: 16px;
  }

  .page-menu-status.menu-status-reference .menu-status-logo img {
    max-width: 140px;
    width: 36%;
  }

  .page-menu-status.menu-status-reference .menu-status-heading {
    margin-bottom: 18px;
  }

  .page-menu-status.menu-status-reference .menu-status-heading h1 {
    font-size: 28px !important;
  }

  .page-menu-status.menu-status-reference .menu-status-legend-cards {
    gap: 5px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 18px;
  }

  .page-menu-status.menu-status-reference .status-legend-card {
    font-size: 8px !important;
    min-height: 32px;
    padding: 6px 4px;
  }

  .page-menu-status.menu-status-reference .calendar-custom-toolbar {
    margin-bottom: 12px;
    min-height: 48px;
  }

  .page-menu-status.menu-status-reference .calendar-custom-toolbar .toolbar-inner {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .page-menu-status.menu-status-reference .calendar-custom-toolbar .center {
    font-size: 24px !important;
  }

  .page-menu-status.menu-status-reference .calendar-custom-toolbar .link {
    height: 38px;
    width: 38px;
  }

  .page-menu-status.menu-status-reference .calendar-week-header {
    gap: 7px;
    margin: 14px 0 8px;
  }

  .page-menu-status.menu-status-reference .calendar-week-day {
    font-size: 10px !important;
  }

  .page-menu-status.menu-status-reference .calendar-months {
    height: 510px !important;
  }

  .page-menu-status.menu-status-reference .calendar-row {
    gap: 7px;
    height: 16.66666667% !important;
    margin-bottom: 7px !important;
  }

  .page-menu-status.menu-status-reference .calendar-day {
    height: calc(147% - 8px) !important;
    margin-top: 5px !important;
  }

  .page-menu-status.menu-status-reference .calendar-day-number {
    font-size: 17px !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
  }

  .page-menu-status.menu-status-reference .COMPLETED:after,
  .page-menu-status.menu-status-reference .SELECT:after,
  .page-menu-status.menu-status-reference .DELIVERED:after,
  .page-menu-status.menu-status-reference .INCOMPLETE:after,
  .page-menu-status.menu-status-reference .OFF:after {
    bottom: 4px !important;
    font-size: 8px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .page-menu-status.menu-status-reference .menu-status-content {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: calc(var(--f7-navbar-height, 56px) + 20px) !important;
  }

  .page-menu-status.menu-status-reference .menu-status-shell {
    margin: 0 auto;
    max-width: 360px;
    width: 100%;
  }

  .page-menu-status.menu-status-reference .menu-status-logo {
    margin-bottom: 14px;
  }

  .page-menu-status.menu-status-reference .menu-status-logo img {
    max-width: 124px;
    width: 34%;
  }

  .page-menu-status.menu-status-reference .status-legend-card {
    font-size: 8px !important;
    min-height: 32px;
    padding: 6px 4px;
  }

  .page-menu-status.menu-status-reference .menu-status-legend-cards {
    gap: 5px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 18px;
  }

  .page-menu-status.menu-status-reference .calendar-custom-toolbar {
    margin-bottom: 12px;
  }

  .page-menu-status.menu-status-reference .calendar-months {
    height: 505px !important;
  }

  .page-menu-status.menu-status-reference .calendar-day {
    height: calc(147% - 8px) !important;
    margin-top: 5px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .page-menu-status.menu-status-reference .calendar-day-number {
    font-size: 17px !important;
    font-weight: 600 !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
  }

  .page-menu-status.menu-status-reference .COMPLETED:after,
  .page-menu-status.menu-status-reference .SELECT:after,
  .page-menu-status.menu-status-reference .DELIVERED:after,
  .page-menu-status.menu-status-reference .INCOMPLETE:after,
  .page-menu-status.menu-status-reference .OFF:after {
    bottom: 4px !important;
    font-size: 8px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
}

.item-details .dz-banner-heading {
  background: linear-gradient(135deg, var(--tuning-green), #16382e) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 170px !important;
  overflow: hidden;
}

.item-details .fixed-content {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  box-shadow: var(--tuning-shadow);
  padding: 20px;
  margin-top: -86px;
  position: relative;
  z-index: 2;
  min-height: 0 !important;
  margin-bottom: 118px;
}

.item-details.page-content {
  padding-bottom: 120px !important;
}

.item-details .dz-banner-height {
  height: 130px !important;
}

.item-details .fixed-content center img {
  display: block;
  width: min(100%, 280px) !important;
  max-height: 260px;
  object-fit: contain;
  margin: 6px auto 18px;
  border-radius: 8px;
  pointer-events: none;
}

.item-details .list.no-hairlines-md {
  width: 100% !important;
  max-width: 260px;
}

.item-details #demo-calendar-modal {
  width: 100% !important;
  background: #fff !important;
}

.item-details #details {
  padding: 0 !important;
}

.price {
  color: var(--tuning-green) !important;
}

.page-media .media-content {
  padding-bottom: 120px !important;
}

.page-media .top-bar {
  margin-bottom: 18px;
}

.page-media .media-title-bar {
  align-items: center;
  margin: 10px 0 6px;
}

.page-media .media-title-bar .dz-title {
  color: var(--tuning-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

[dir="rtl"] .page-media .media-title-bar .dz-title {
  text-align: right;
}

.page-media .media-category-swiper {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: auto !important;
  margin-bottom: 8px !important;
  overflow: visible !important;
  padding: 0;
}

.page-media .media-category-swiper .swiper-wrapper {
  display: grid !important;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto !important;
  justify-content: center;
  justify-items: center;
  transform: none !important;
  width: 100% !important;
}

.page-media .media-category-swiper .swiper-slide {
  height: auto !important;
  margin: 0 !important;
  width: 100% !important;
}

.page-media .media-category-card,
.page-media .media-category-card.card-overlay.style-1 {
  align-items: center;
  background: #eef6f2 !important;
  border: 1px solid #dcebe4;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 30px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 6px;
  width: 100%;
}

.page-media .media-category-swiper .swiper-slide:nth-child(1) .media-category-card {
  border-top-left-radius: 8px;
}

.page-media .media-category-swiper .swiper-slide:nth-child(2) .media-category-card,
.page-media .media-category-swiper .swiper-slide:nth-child(3) .media-category-card,
.page-media .media-category-swiper .swiper-slide:nth-child(5) .media-category-card,
.page-media .media-category-swiper .swiper-slide:nth-child(6) .media-category-card {
  border-left-width: 0;
}

.page-media .media-category-swiper .swiper-slide:nth-child(n+4) .media-category-card {
  border-top-width: 0;
}

.page-media .media-category-swiper .swiper-slide:nth-child(3) .media-category-card {
  border-top-right-radius: 8px;
}

.page-media .media-category-swiper .swiper-slide:nth-child(4) .media-category-card {
  border-bottom-left-radius: 8px;
}

.page-media .media-category-swiper .swiper-slide:nth-child(6) .media-category-card {
  border-bottom-right-radius: 8px;
}

.page-media .media-category-card .dz-info,
.page-media .media-category-card center {
  padding: 0 !important;
  width: 100%;
}

.page-media .media-category-card .item-title {
  margin: 0 !important;
}

.page-media .media-category-card .item-title a {
  color: var(--tuning-green) !important;
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-media #player.media-player-card {
  background: linear-gradient(180deg, #ffffff, #f9fcfa);
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(10, 31, 25, 0.09);
  margin: 0 0 12px;
  padding: 13px 12px 12px;
}

.page-media .media-player-controls {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.page-media #player button {
  align-items: center;
  background: #eef6f2;
  border: 1px solid #dcebe4;
  border-radius: 999px;
  box-shadow: none;
  color: var(--tuning-green);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 34px;
}

.page-media #player button i {
  color: inherit;
  font-size: 13px;
  line-height: 1;
}

.page-media #playPauseButton.media-control-primary {
  background: var(--tuning-green) !important;
  border-color: var(--tuning-green);
  box-shadow: 0 10px 22px rgba(0, 87, 60, 0.24);
  color: #fff;
  height: 44px;
  width: 44px;
}

.page-media #playPauseButton.media-control-primary i {
  font-size: 16px;
}

.page-media #repeatOnIcon {
  color: #fff;
  background: var(--tuning-green);
  border-radius: 999px;
  box-shadow: 0 0 0 7px var(--tuning-green);
}

.page-media .media-player-meta {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 10px;
  min-height: 18px;
}

.page-media .media-player-kicker {
  color: var(--tuning-muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.page-media #MusicName {
  color: var(--tuning-ink);
  display: block;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  max-width: 58%;
  min-height: 12px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-media .media-progress-label {
  align-items: center;
  color: var(--tuning-muted);
  display: block !important;
  font-size: 11px;
  font-weight: 800;
  margin-top: 8px;
}

.page-media #progress {
  accent-color: var(--tuning-green);
  margin: 0;
  width: 100% !important;
}

.page-media .media-video-swiper {
  margin-bottom: 14px !important;
  overflow: visible !important;
}

.page-media .media-video-swiper .swiper-wrapper {
  display: grid !important;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  transform: none !important;
  width: 100% !important;
}

.page-media .media-video-swiper .swiper-slide {
  margin: 0 !important;
  width: 100% !important;
}

.page-media .media-video-swiper img {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(10, 31, 25, 0.12);
  cursor: pointer;
  display: block;
  object-fit: cover;
  width: 100% !important;
}

.page-media #video-popup .page-content {
  background: #101614;
  padding: 16px;
}

.page-media #videoPlayer {
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

.page-menu-browser .menu-browser-content {
  padding-bottom: 124px !important;
}

.page-menu-browser .menu-browser-container {
  margin-top: 0 !important;
}

.page-menu-browser .menu-browser-hero {
  margin-bottom: 16px;
  min-height: 126px;
  padding: 16px !important;
}

.page-menu-browser .menu-browser-label {
  color: #fff !important;
  display: inline-block;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 8px;
  max-width: 100px;
  opacity: 0.96;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.page-menu-browser .menu-browser-hero .title {
  color: #fff !important;
  font-size: 22px;
  line-height: 1.05;
  margin-top: 28px;
  max-width: 130px;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.page-menu-browser .menu-month-row {
  margin: 0 0 10px !important;
}

.page-menu-browser .menu-month-label {
  color: var(--tuning-muted);
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
}

.page-menu-browser .menu-days-swiper {
  margin-bottom: 12px !important;
  overflow: visible;
}

.page-menu-view .menu-sticky-filterbar {
  background: rgba(250, 253, 249, 0.96);
  border-bottom: 1px solid rgba(0, 87, 60, 0.08);
  box-shadow: 0 12px 24px rgba(10, 31, 25, 0.08);
  margin-left: -1px;
  margin-right: -1px;
  padding: 8px 0 10px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.page-menu-view .menu-sticky-filterbar.menu-filterbar-fixed {
  left: var(--menu-filter-left, 0);
  margin-left: 0;
  margin-right: 0;
  position: fixed;
  right: auto;
  top: var(--menu-filter-top, 0);
  transform: translate3d(0, 0, 0);
  width: var(--menu-filter-width, 100%);
  z-index: 100001;
}

.page-menu-view .menu-filterbar-spacer {
  display: none;
}

.page-menu-view .menu-filterbar-spacer.menu-filterbar-spacer-active {
  display: block;
  height: var(--menu-filter-height, 0);
}

.page-menu-view .menu-sticky-filterbar .menu-days-swiper {
  margin-bottom: 10px !important;
}

.page-menu-view .menu-sticky-filterbar .menu-category-nav {
  margin: 0 0 10px;
}

.page-menu-view .menu-sticky-filterbar .menu-search-input {
  margin-bottom: 0 !important;
}

.page-menu-browser .menu-days-swiper .swiper-wrapper {
  gap: 7px;
}

.page-menu-browser .menu-days-swiper .swiper-slide {
  width: auto !important;
}

.page-menu-browser [name="MenuDayBlocks"] {
  align-items: center;
  border-radius: 6px !important;
  box-shadow: 0 8px 18px rgba(0, 87, 60, 0.16);
  display: flex;
  height: 42px;
  justify-content: center;
  min-width: 42px;
  padding: 0 12px !important;
}

.page-menu-browser [name="MenuDayBlocks"] .title {
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

.page-menu-browser .menu-category-nav {
  margin: 8px 0 16px;
}

.page-menu-browser .menu-category-tabs,
.page-menu-selection .menu-category-tabs,
.menu-category-tabs {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.page-menu-browser .menu-category-tabs li:not(.menu-selection-date-item),
.page-menu-selection .menu-category-tabs li:not(.menu-selection-date-item),
.menu-category-tabs li:not(.menu-selection-date-item) {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.page-menu-browser .menu-category-tabs a,
.page-menu-selection .menu-category-tabs a,
.menu-category-tabs a {
  align-items: center;
  background: #eef6f2;
  border: 1px solid #dcebe4;
  border-radius: 999px;
  color: var(--tuning-green) !important;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
}

/* Date & Day Name - Always On New Line & Centralized */
.menu-selection-date-item,
.menu-category-tabs .menu-selection-date-item,
.page-menu-selection .menu-category-tabs center,
.page-menu-browser .menu-category-tabs center,
.menu-category-tabs center,
ul#allcat center {
  width: 100% !important;
  flex-basis: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  list-style: none !important;
  margin: 12px auto 6px !important;
  padding: 0 !important;
  clear: both !important;
}

.menu-selected-date-badge,
.page-menu-selection .menu-category-tabs center:not(:has(img)),
.page-menu-browser .menu-category-tabs center:not(:has(img)),
.menu-category-tabs center:not(:has(img)),
ul#allcat center:not(:has(img)) {
  background: var(--tuning-green, #00573C) !important;
  color: #ffffff !important;
  padding: 6px 18px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0, 87, 60, 0.16) !important;
  margin: 0 auto !important;
  max-width: 220px !important;
}

.page-menu-browser .menu-search-input {
  background: #fff !important;
  border: 1px solid var(--tuning-border) !important;
  box-shadow: 0 8px 20px rgba(10, 31, 25, 0.06);
  color: var(--tuning-ink);
  font-size: 13px !important;
  margin: 0 0 14px !important;
  outline: 0;
  width: 100% !important;
}

.page-menu-browser .menu-meal-section {
  margin-bottom: 96px !important;
}

.page-menu-browser .menu-meal-list {
  display: grid !important;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.page-menu-browser .menu-meal-list > li {
  list-style: none;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

.page-menu-browser .item-bx.item-list,
.page-menu-selection [name="blockselection"] {
  background: #fff !important;
  border: 1px solid var(--tuning-border);
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(10, 31, 25, 0.08);
  color: var(--tuning-ink) !important;
  display: block !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 0 12px !important;
  position: relative;
  width: 100% !important;
}

.page-menu-browser .item-bx.item-list .dz-media,
.page-menu-selection [name="blockselection"] > img {
  background: #f6faf7;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

.page-menu-browser .item-bx.item-list .dz-media img,
.page-menu-selection [name="blockselection"] > img {
  aspect-ratio: 1 / 0.78;
  border-radius: 0 !important;
  display: block;
  height: auto !important;
  object-fit: cover;
  width: 100% !important;
}

.page-menu-browser .item-bx.item-list .dz-info,
.page-menu-selection [name="blockselection"] .dz-info {
  box-sizing: border-box !important;
  display: block !important;
  padding: 10px 10px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.page-menu-browser .item-bx.item-list .dz-head {
  margin-bottom: 0 !important;
}

.page-menu-browser .item-title,
.page-menu-browser .item-title a {
  color: var(--tuning-ink) !important;
  font-size: 10px !important;
  font-weight: 900;
  line-height: 1.25;
  min-height: 32px;
  text-decoration: none;
}

.page-menu-selection [name="blockselection"] .item-title a {
  align-content: start !important;
  display: grid !important;
  height: auto !important;
  min-height: 52px;
}

.page-menu-selection [name="blockselection"] .item-title img {
  background: #e9f4ef;
  border-radius: 999px;
  box-shadow: 0 0 0 6px #e9f4ef;
  height: 14px;
  margin: 8px auto 0 !important;
  width: 14px !important;
}

.page-menu-browser .dz-meta ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================================
   SOFT PREMIUM GREEN NUTRITION PANEL
   ======================================================== */
.meal-nutrition-meta,
.dz-meta.meal-nutrition-meta,
.page-menu-selection [name="blockselection"] .dz-meta.meal-nutrition-meta,
.page-menu-browser .dz-meta.meal-nutrition-meta {
  display: block !important;
  margin: 6px 0 8px !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nutrition-panel,
.page-menu-selection .nutrition-panel,
.page-menu-browser .nutrition-panel,
.price.nutrition-panel {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  background: #edf5f0 !important; /* Soft pastel mint background */
  border-radius: 12px !important; /* Rounded pill/card shapes */
  padding: 6px 3px 5px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(0, 87, 60, 0.05) !important; /* No hard borders, subtle green tint */
  box-shadow: 0 1px 4px rgba(0, 87, 60, 0.04) !important; /* Very subtle shadow */
  list-style: none !important;
  font-size: 11px !important;
}

.nutrition-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
  padding: 2px 1px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Small soft green icon circle at the top */
.nutrition-icon-circle {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 50% !important;
  background: #dbeee3 !important; /* Soft mint circular background */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 3px !important;
  color: #237553 !important; /* Medium green outline icon */
  box-sizing: border-box !important;
}

.nutrition-svg {
  width: 11px !important;
  height: 11px !important;
  stroke: #237553 !important; /* Medium green outline */
  display: block !important;
}

/* Large bold value in the middle */
.nutrition-val {
  color: #00573c !important; /* Dark green text */
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

.nutrition-unit {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #1a6d4b !important;
  margin-left: 1px !important;
  opacity: 0.88 !important;
  text-transform: lowercase !important;
}

/* Small label underneath */
.nutrition-label {
  color: #4f7d6a !important; /* Muted green label */
  font-size: 8px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  letter-spacing: 0.1px !important;
  font-family: inherit !important;
}

/* Fallback for legacy price sup if any element still uses sup */
.page-menu-browser .price:not(.nutrition-panel),
.page-menu-selection .price:not(.nutrition-panel) {
  color: var(--tuning-green) !important;
  display: grid !important;
  gap: 3px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 6px 0 0 !important;
  width: 100% !important;
  background: #edf5f0 !important;
  border-radius: 12px !important;
  padding: 6px 3px 5px !important;
  border: 1px solid rgba(0, 87, 60, 0.05) !important;
  box-shadow: 0 1px 4px rgba(0, 87, 60, 0.04) !important;
}

.page-menu-browser .price:not(.nutrition-panel) sup,
.page-menu-selection .price:not(.nutrition-panel) sup {
  background: transparent !important;
  border-radius: 6px;
  color: #00573c !important;
  display: block;
  font-size: 9px !important;
  font-weight: 800;
  line-height: 1.25;
  padding: 3px 1px;
  text-align: center;
  top: auto;
}

.page-menu-browser .rating {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  gap: 3px;
  height: 24px;
  justify-content: center;
  min-width: 34px;
  padding: 0 8px;
  right: 8px;
  top: 8px;
}

.page-menu-browser .dz-info > .rating {
  background: #e9f4ef !important;
  color: var(--tuning-green) !important;
  height: 22px;
  margin: 4px auto 8px !important;
  min-width: 0;
  padding: 0 8px;
  position: static !important;
  width: fit-content;
}

.page-menu-browser .dz-info > .rating i {
  color: var(--tuning-green) !important;
  font-size: 9px;
}

.page-menu-selection .menu-selection-section {
  margin-bottom: 96px !important;
  overflow: visible !important;
  padding-bottom: 18px !important;
}

.page-menu-selection .menu-selection-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 420px !important;
  padding: 0 2px !important;
  width: calc(100vw - 34px) !important;
}

.page-menu-selection [name="blockselection"] {
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  min-height: 298px !important;
  width: 100% !important;
}

.page-menu-selection [name="blockselection"] > img {
  aspect-ratio: 1 / 0.9;
}

.page-menu-selection [name="blockselection"] .item-title,
.page-menu-selection [name="blockselection"] .item-title.title {
  margin: 0 !important;
}

.page-menu-selection [name="blockselection"] .item-title a {
  font-size: 11px !important;
  line-height: 1.22 !important;
  min-height: 64px;
  padding: 0 2px;
}

.page-menu-selection [name="blockselection"] .dz-meta {
  margin-top: 2px !important;
}

.page-menu-selection .ActivemenuSelectoion {
  border-color: var(--tuning-green) !important;
  box-shadow: 0 0 0 2px rgba(0, 87, 60, 0.18), 0 16px 30px rgba(0, 87, 60, 0.13) !important;
}

.page-menu-selection .ActivemenuSelectoion:after {
  align-items: center;
  background: var(--tuning-green);
  border-radius: 999px;
  color: #fff;
  content: "\2713";
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
}

.page-user-info .user-info-content {
  padding: 82px 14px 120px !important;
}

.page-user-info .navbar.navbar-style-1 {
  background: rgba(255, 255, 255, 0.96);
}

.page-user-info .navbar.navbar-style-1 .title {
  font-size: 15px;
}

.page-user-info .navbar.navbar-style-1 a.link {
  align-items: center;
  background: #e9f4ef;
  border-radius: 999px;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.page-user-info .navbar.navbar-style-1 a.link svg {
  height: 18px;
  width: 18px;
}

.page-user-info .user-info-card {
  background: #fff;
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(10, 31, 25, 0.08);
  margin: 0 auto !important;
  max-width: 520px;
  overflow: hidden;
}

.page-user-info .profile-summary-hero {
  align-items: center;
  background: linear-gradient(135deg, var(--tuning-green), #117b5b);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 87, 60, 0.2);
  color: #fff;
  display: grid;
  gap: 12px;
  grid-template-columns: 46px minmax(0, 1fr);
  margin: 0 auto 12px;
  max-width: 520px;
  padding: 14px;
}

.page-user-info .profile-summary-avatar {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.page-user-info .profile-summary-avatar i {
  color: #fff;
  font-size: 18px;
}

.page-user-info .profile-summary-hero strong,
.page-user-info .profile-summary-hero span {
  color: #fff !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-user-info .profile-summary-hero strong {
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.2;
}

.page-user-info .profile-summary-hero span {
  font-size: 10px !important;
  line-height: 1.35;
  margin-top: 4px;
  opacity: 0.82;
}

.page-user-info .user-info-card ul {
  background: transparent !important;
  padding: 12px !important;
}

.page-user-info .user-info-card li.item-content {
  background: transparent !important;
  border: 0 !important;
  margin-bottom: 10px;
  min-height: 0;
  padding: 0 !important;
}

.page-user-info .user-info-card .item-inner {
  padding: 0 !important;
}

.page-user-info .item-title.item-label {
  color: var(--tuning-muted);
  font-size: 10px !important;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.page-user-info .user-info-input-wrap {
  background: #fbfcf8;
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  min-height: 44px;
}

.page-user-info .user-info-input-wrap input {
  color: var(--tuning-ink);
  font-size: 12px !important;
  font-weight: 800;
  height: 44px !important;
  padding: 0 12px !important;
}

.page-user-info .user-info-input-wrap input:disabled {
  color: var(--tuning-green);
  opacity: 1;
}

.page-user-info .input-clear-button {
  right: 8px;
}

.page-user-info .user-info-option-row {
  align-items: center;
  display: flex;
  gap: 8px;
}

.page-user-info .user-info-gender-row img {
  background: #fbfcf8;
  border: 1px solid var(--tuning-border);
  border-radius: 999px;
  height: 38px;
  margin: 0 !important;
  padding: 7px;
  width: 38px !important;
}

.page-user-info .user-info-delivery-row img {
  background: #fbfcf8;
  border: 1px solid var(--tuning-border);
  border-radius: 8px;
  height: 64px;
  margin: 0 !important;
  object-fit: contain;
  padding: 8px;
  width: 86px !important;
}

.page-user-info .user-info-gender-row img[style*="grayscale(0"],
.page-user-info .user-info-delivery-row img[style*="grayscale(0"] {
  background: #e9f4ef;
  border-color: var(--tuning-green);
  box-shadow: 0 0 0 2px rgba(0, 87, 60, 0.12);
}

.page-user-info .user-info-save-row {
  margin-top: 4px;
}

.page-user-info .user-info-save-button {
  align-items: center;
  background: var(--tuning-green) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 24px rgba(0, 87, 60, 0.2);
  color: #fff !important;
  display: flex !important;
  font-size: 12px !important;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  line-height: 1 !important;
  margin: 0 !important;
  text-decoration: none;
  width: 100%;
}

.page-user-address .address-summary-hero {
  align-items: center;
  background: linear-gradient(135deg, var(--tuning-green), #117b5b);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 87, 60, 0.2);
  color: #fff;
  display: grid;
  gap: 12px;
  grid-template-columns: 46px minmax(0, 1fr);
  margin: 0 auto 12px;
  max-width: 520px;
  padding: 14px;
}

.page-user-address .address-summary-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.page-user-address .address-summary-icon i {
  color: #fff;
  font-size: 18px;
}

.page-user-address .address-summary-hero strong,
.page-user-address .address-summary-hero span {
  color: #fff !important;
  display: block;
}

.page-user-address .address-summary-hero strong {
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.2;
}

.page-user-address .address-summary-hero span {
  font-size: 10px !important;
  line-height: 1.35;
  margin-top: 4px;
  opacity: 0.82;
}

.page-user-address .address-info-card {
  min-height: 0;
}

.page-user-address .address-textarea-wrap {
  min-height: 112px;
}

.page-user-address .address-textarea {
  background: transparent !important;
  border: 0 !important;
  color: var(--tuning-ink);
  font-size: 12px !important;
  font-weight: 800;
  height: 112px !important;
  line-height: 1.45;
  padding: 12px !important;
}

.page-user-address .address-help-row {
  align-items: flex-start;
  background: #f6fbf8;
  border: 1px solid #e3efe9;
  border-radius: 8px;
  color: var(--tuning-muted);
  display: grid;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
  margin: 0 0 10px;
  padding: 10px;
}

.page-user-address .address-help-row i {
  color: var(--tuning-green);
  font-size: 13px;
  margin-top: 2px;
}

.page-user-address .address-help-row span {
  color: var(--tuning-muted) !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.45;
}

.page-user-note .note-summary-hero {
  align-items: center;
  background: linear-gradient(135deg, var(--tuning-green), #117b5b);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 87, 60, 0.2);
  color: #fff;
  display: grid;
  gap: 12px;
  grid-template-columns: 46px minmax(0, 1fr);
  margin: 0 auto 12px;
  max-width: 520px;
  padding: 14px;
}

.page-user-note .note-summary-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.page-user-note .note-summary-icon i {
  color: #fff;
  font-size: 18px;
}

.page-user-note .note-summary-hero strong,
.page-user-note .note-summary-hero span {
  color: #fff !important;
  display: block;
}

.page-user-note .note-summary-hero strong {
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.2;
}

.page-user-note .note-summary-hero span {
  font-size: 10px !important;
  line-height: 1.35;
  margin-top: 4px;
  opacity: 0.82;
}

.page-user-note .note-textarea-wrap {
  min-height: 132px;
}

.page-user-note .note-textarea {
  background: transparent !important;
  border: 0 !important;
  color: var(--tuning-ink);
  font-size: 12px !important;
  font-weight: 800;
  height: 132px !important;
  line-height: 1.45;
  padding: 12px !important;
}

.page-user-note .note-help-row {
  align-items: flex-start;
  background: #f6fbf8;
  border: 1px solid #e3efe9;
  border-radius: 8px;
  color: var(--tuning-muted);
  display: grid;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
  margin: 0 0 10px;
  padding: 10px;
}

.page-user-note .note-help-row i {
  color: var(--tuning-green);
  font-size: 13px;
  margin-top: 2px;
}

.page-user-note .note-help-row span {
  color: var(--tuning-muted) !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.45;
}

[dir="rtl"] .tuning-top-actions {
  justify-content: flex-end;
}

@media (max-width: 420px) {
  .container {
    width: min(100% - 22px, 680px);
  }

  .top-bar {
    min-height: 104px;
    padding: 12px;
  }

  .top-bar .title {
    margin-top: 24px;
    font-size: 18px;
  }

  .page[data-name="PayNowNew"] .top-bar,
  .page[data-name="Consultation"] .top-bar {
    min-height: auto !important;
    padding: 14px 16px !important;
    margin-top: 4px !important;
    margin-bottom: 14px !important;
  }

  .page[data-name="PayNowNew"] .top-bar .title,
  .page[data-name="Consultation"] .top-bar .title {
    margin-top: 2px !important;
    font-size: 18px !important;
  }

  .page[data-name="PayNowNew"] .top-bar .text,
  .page[data-name="Consultation"] .top-bar .text {
    font-size: 12px !important;
    display: block !important;
  }

  .page[data-name="PayNowNew"] .top-bar .row,
  .page[data-name="Consultation"] .top-bar .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .top-bar .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .tuning-top-actions {
    max-width: none;
    justify-content: flex-end !important;
    margin-top: 0;
    gap: 5px !important;
  }

  .tuning-top-actions > button,
  .tuning-text-action,
  .tuning-icon-action {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tuning-icon-action img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
    margin: auto !important;
  }

  .tuning-lang-action,
  .tuning-lang-action span {
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .tuning-text-action i {
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
  }

  .tuning-text-action:not(.tuning-lang-action) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .top-bar .text {
    font-size: 12px !important;
    white-space: nowrap;
  }

  .page[data-name="HomePage"] .top-bar,
  .page-profile-menu .top-bar,
  .page[data-name="second_page"] .top-bar {
    min-height: 74px !important;
    padding: 11px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 16px !important;
  }

  .page[data-name="HomePage"] .top-bar:after,
  .page-profile-menu .top-bar:after,
  .page[data-name="second_page"] .top-bar:after {
    right: -62px;
    bottom: -92px;
    width: 148px;
    height: 148px;
  }

  .page[data-name="HomePage"] .top-bar .text,
  .page-profile-menu .top-bar .text,
  .page[data-name="second_page"] .top-bar .text {
    font-size: 12px !important;
    white-space: nowrap;
  }

  .page[data-name="HomePage"] .top-bar .title,
  .page-profile-menu .top-bar .title,
  .page[data-name="second_page"] .top-bar .title {
    margin-top: 10px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .page-home .content-area > .container > .row {
    grid-template-columns: 1fr;
  }

  .home-dashboard-row > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .home-action-list {
    justify-self: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
  }

  .home-action-list .button {
    font-size: 11px !important;
    font-weight: 800 !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: hidden !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    width: 100% !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .subscription-progress-col {
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    display: flex !important;
    height: 100% !important;
  }

  .subscription-progress-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 8px !important;
    border-radius: 16px !important;
    min-height: 184px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 24px rgba(10, 31, 25, 0.08) !important;
  }

  .subscription-progress-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
  }

  .subscription-progress-gauge,
  .subscription-progress-gauge svg {
    height: 134px !important;
    max-width: 100% !important;
    width: 134px !important;
  }

  .subscription-status-card {
    grid-template-columns: 1fr;
  }

  .subscription-status-main {
    border-bottom: 1px solid var(--tuning-border);
    border-right: 0;
  }

  [dir="rtl"] .subscription-status-main {
    border-left: 0;
  }

  .page-media .top-bar {
    min-height: 116px;
    padding: 12px;
  }

  .page-media .top-bar .title {
    bottom: 14px;
    margin-top: 26px;
    max-width: calc(100% - 28px);
  }

  .page-media .media-category-card {
    min-height: 28px;
    min-width: 0;
    padding: 0 5px;
  }

  .page-media .media-player-controls {
    gap: 7px;
  }

  .page-media #player button {
    height: 32px;
    width: 32px;
  }

  .page-media #playPauseButton.media-control-primary {
    height: 42px;
    width: 42px;
  }

  .page-menu-browser .menu-browser-hero {
    min-height: 110px;
    padding: 14px !important;
  }

  .page-menu-browser .menu-browser-hero .title {
    font-size: 19px;
    margin-top: 22px;
    max-width: 112px;
  }

  .page-menu-browser .menu-days-swiper {
    margin-bottom: 10px !important;
  }

  .page-menu-browser [name="MenuDayBlocks"] {
    height: 38px;
    min-width: 38px;
    padding: 0 10px !important;
  }

  .page-menu-browser [name="MenuDayBlocks"] .title {
    font-size: 12px;
  }

  .page-menu-browser .menu-meal-list,
  .page-menu-selection .menu-selection-grid {
    gap: 10px;
  }

  .page-menu-selection .menu-selection-grid {
    max-width: 420px !important;
    width: calc(100vw - 30px) !important;
  }

  .page-menu-selection [name="blockselection"] {
    min-height: 290px !important;
  }

  .page-menu-browser .item-bx.item-list .dz-info,
  .page-menu-selection [name="blockselection"] .dz-info {
    padding: 10px 9px 0 !important;
  }

  .page-menu-browser .item-title,
  .page-menu-browser .item-title a {
    font-size: 10px !important;
  }

  .page-menu-selection [name="blockselection"] .item-title a {
    font-size: 10.5px !important;
    min-height: 62px;
  }

  .nutrition-panel,
  .page-menu-selection .nutrition-panel,
  .page-menu-browser .nutrition-panel {
    gap: 2px !important;
    padding: 5px 2px 4px !important;
  }

  .nutrition-val {
    font-size: 10px !important;
  }

  .nutrition-unit {
    font-size: 7.5px !important;
  }

  .nutrition-label {
    font-size: 7.5px !important;
  }

  .nutrition-icon-circle {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  .nutrition-svg {
    width: 10px !important;
    height: 10px !important;
  }
}

/* ==========================================================================
   Tuning Modern Login, Contact Card, and Meal Switcher Styling
   ========================================================================== */
.tuning-login-container {
  max-width: 440px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}

.tuning-login-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(7, 95, 69, 0.12);
  box-shadow: 0 12px 32px rgba(22, 32, 29, 0.08);
  padding: 24px 20px;
  margin-top: 10px;
}

.tuning-login-title {
  color: var(--tuning-ink);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
}

.tuning-login-subtitle {
  color: var(--tuning-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.tuning-btn-primary {
  background-color: var(--tuning-green) !important;
  color: #ffffff !important;
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 18px rgba(7, 95, 69, 0.28) !important;
  cursor: pointer;
  border: none;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.tuning-btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(7, 95, 69, 0.2) !important;
}

.tuning-btn-text {
  background: transparent !important;
  color: var(--tuning-green) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 8px 4px !important;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin-top: 8px;
}

.tuning-contact-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px;
}

.tuning-hours-card {
  background: #ffffff;
  border: 1px solid rgba(7, 95, 69, 0.12);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(22, 32, 29, 0.06);
  text-align: center;
}

.tuning-hours-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tuning-mint);
  color: var(--tuning-green);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.tuning-hours-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--tuning-ink);
  margin: 0 0 12px;
}

.tuning-hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px dashed rgba(7, 95, 69, 0.15);
  padding-top: 14px;
}

.tuning-hours-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tuning-hours-label {
  font-size: 12px;
  color: var(--tuning-muted);
  font-weight: 600;
}

.tuning-hours-val {
  font-size: 13px;
  color: var(--tuning-ink);
  font-weight: 700;
}

.tuning-contact-card {
  background: #ffffff;
  border: 1px solid rgba(7, 95, 69, 0.12);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(22, 32, 29, 0.05);
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--tuning-ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tuning-contact-card:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(22, 32, 29, 0.04);
}

.tuning-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.tuning-contact-icon.whatsapp {
  background: #e8f8ef;
  color: #25d366;
}

.tuning-contact-icon.call {
  background: #e6f4ee;
  color: var(--tuning-green);
}

.tuning-contact-icon.location {
  background: #fdf3e7;
  color: #d8ab58;
}

.tuning-contact-info {
  flex: 1;
  min-width: 0;
}

.tuning-contact-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tuning-ink);
  margin: 0 0 3px;
}

.tuning-contact-desc {
  font-size: 13px;
  color: var(--tuning-muted);
  margin: 0;
}

.tuning-contact-arrow {
  color: #a8b4b0;
  font-size: 16px;
  flex-shrink: 0;
}

.tuning-meal-day-toggle {
  margin: 18px 0 10px;
}

.tuning-meal-segmented {
  background: rgba(7, 95, 69, 0.08);
  border-radius: 12px;
  padding: 4px;
  max-width: 380px;
  margin: 0 auto;
}

.tuning-meal-segmented .button {
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tuning-muted) !important;
  height: 38px !important;
  line-height: 38px !important;
  transition: all 0.2s ease;
  border: none !important;
}

.tuning-meal-segmented .button.tab-link-active {
  background: var(--tuning-green) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(7, 95, 69, 0.25);
}
/* ==========================================================================
   Tuning Center Unified Design System Extensions
   ========================================================================== */

/* Page Headers & Hero */
.tuning-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--tuning-border);
}

.tuning-page-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--tuning-ink);
  margin: 0;
  line-height: 1.25;
}

.tuning-page-subtitle {
  font-size: 13px;
  color: var(--tuning-muted);
  margin: 4px 0 0;
}

/* Cards */
.tuning-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--tuning-border);
  box-shadow: var(--tuning-soft-shadow);
  padding: 18px 16px;
  margin-bottom: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tuning-card-elevated {
  box-shadow: var(--tuning-shadow);
}

.tuning-card:hover {
  box-shadow: 0 14px 34px rgba(22, 32, 29, 0.11);
}

/* Section Titles */
.tuning-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 12px;
}

.tuning-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--tuning-ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tuning-section-title i {
  color: var(--tuning-green);
  font-size: 16px;
}

/* Buttons */
.tuning-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
  border: 1px solid transparent;
  user-select: none;
  touch-action: manipulation;
}

.tuning-btn-secondary {
  background: var(--tuning-mint) !important;
  color: var(--tuning-green) !important;
  border-color: rgba(7, 95, 69, 0.15) !important;
}

.tuning-btn-secondary:active {
  transform: scale(0.98);
  background: #d8ece3 !important;
}

.tuning-btn-outline {
  background: transparent !important;
  color: var(--tuning-green) !important;
  border-color: var(--tuning-green) !important;
}

.tuning-btn-outline:active {
  background: var(--tuning-mint) !important;
  transform: scale(0.98);
}

.tuning-btn:disabled,
.tuning-btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Form Fields */
.tuning-input-wrap {
  position: relative;
  margin-bottom: 16px;
}

.tuning-input-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--tuning-ink);
  margin-bottom: 6px;
}

.tuning-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--tuning-border);
  background: #ffffff;
  font-size: 15px;
  color: var(--tuning-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tuning-input:focus {
  outline: none;
  border-color: var(--tuning-green);
  box-shadow: 0 0 0 3px rgba(7, 95, 69, 0.12);
}

/* Badges & Chips */
.tuning-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.tuning-badge-green {
  background: var(--tuning-mint);
  color: var(--tuning-green);
}

.tuning-badge-coral {
  background: #fdeee9;
  color: var(--tuning-coral);
}

.tuning-badge-gold {
  background: #faf4e6;
  color: var(--tuning-gold);
}

/* Empty State */
.tuning-empty-state {
  text-align: center;
  padding: 36px 20px;
}

.tuning-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tuning-mint);
  color: var(--tuning-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
}

.tuning-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--tuning-ink);
  margin: 0 0 6px;
}

.tuning-empty-desc {
  font-size: 13px;
  color: var(--tuning-muted);
  max-width: 280px;
  margin: 0 auto;
}

/* RTL Helpers */
[dir="rtl"] .tuning-section-title i,
html[lang="ar"] .tuning-section-title i {
  margin-left: 8px;
  margin-right: 0;
}

[dir="rtl"] .tuning-btn i,
html[lang="ar"] .tuning-btn i {
  margin-left: 6px;
  margin-right: 0;
}

/* ==========================================================================
   Calendar Day Cell Centering (Menu Status & General Calendars)
   Guarantees all day numbers are centered horizontally and vertically
   ========================================================================== */
.page-menu-status .calendar-day,
.page-menu-status.menu-status-reference .calendar-day,
#demo-calendar-inline-container .calendar-day {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}

.page-menu-status .calendar-day-number,
.page-menu-status.menu-status-reference .calendar-day-number,
#demo-calendar-inline-container .calendar-day-number {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* =========================================================
   Full Day Nutrition Summary Card (Menu Selection)
   ========================================================= */
.menu-day-nutrition-section {
  width: 100% !important;
  max-width: 390px !important;
  margin: 18px auto 32px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  clear: both !important;
  position: relative !important;
  z-index: 5 !important;
}

.menu-day-nutrition-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 87, 60, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 87, 60, 0.06) !important;
  padding: 14px 14px 12px !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.menu-day-nutrition-card.is-updated {
  animation: nutrCardPulse 0.35s ease !important;
}

@keyframes nutrCardPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.menu-day-nutrition-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0, 87, 60, 0.08) !important;
}

.menu-day-nutrition-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: start !important;
}

.menu-day-nutrition-badge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 10px !important;
  background: #edf5f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.menu-day-nutrition-badge img,
.menu-day-nutrition-header-img {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
}

.menu-day-nutrition-header-svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #00573c !important;
}

.menu-day-nutrition-titles {
  display: flex !important;
  flex-direction: column !important;
  text-align: start !important;
}

.menu-day-nutrition-title {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #00573c !important;
  line-height: 1.25 !important;
  font-family: inherit !important;
}

.menu-day-nutrition-sub {
  margin: 2px 0 0 !important;
  font-size: 10px !important;
  color: #4f7d6a !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  font-family: inherit !important;
}

.menu-day-nutrition-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  background: #edf5f0 !important;
  border-radius: 14px !important;
  padding: 10px 4px 8px !important;
  border: 1px solid rgba(0, 87, 60, 0.05) !important;
  box-sizing: border-box !important;
}

.menu-day-nutrition-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
  padding: 2px 1px !important;
}

.menu-day-nutrition-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 50% !important;
  background: #dbeee3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 4px !important;
  color: #237553 !important;
}

.menu-day-nutrition-icon .nutrition-svg {
  width: 13px !important;
  height: 13px !important;
  stroke: #237553 !important;
}

.menu-day-nutrition-val {
  color: #00573c !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

.menu-day-nutrition-val .nutrition-unit {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: #1a6d4b !important;
  margin: 0 1px 0 2px !important;
  opacity: 0.9 !important;
  text-transform: lowercase !important;
}

.menu-day-nutrition-label {
  color: #4f7d6a !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  font-family: inherit !important;
}