/* Vitaro Brand Theme — RTL Hebrew */
:root {
  --vt-blue:         #1B5B8A;
  --vt-blue-dark:    #0C3D5E;
  --vt-blue-light:   #EDF2FE;
  --vt-green:        #6CC63A;
  --vt-green-dark:   #3B6D11;
  --vt-green-light:  #EAF3DE;
  --vt-brown:        #8B5E3C;
  --vt-brown-light:  #F5EDE3;
  --vt-teal:         #4A9EBF;
  --vt-teal-light:   #E8F6FB;
  --vt-gray-heading: #5A5F6B;
  --vt-gray-sub:     #888D99;
  --vt-bg:           #F0F4F8;
  --vt-card:         #FFFFFF;
  --vt-card-border:  #D4E8C2;
  --vt-shadow:       0 2px 12px rgba(27,91,138,0.09);
  --vt-radius:       16px;
  --vt-radius-sm:    10px;
  --vt-radius-pill:  999px;
}

html, body {
  direction: rtl !important;
  text-align: right !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  background: #F0F4F8 !important;
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

/* === HEADER === */
.vt-header, .page-header, .app-header, .logo-header, .upgrade-hero {
  background: #F2F4FD;
  color: #2C2C2A;
  border-radius: 0 0 28px 28px;
  padding: 20px 20px 40px;
  position: relative;
  z-index: 1;
}
.vt-header *, .page-header *, .app-header *, .logo-header *, .upgrade-hero * {
  color: #2C2C2A;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.header-logo-dot, .logo-dot, .vt-logo-dot {
  width: 28px;
  height: 28px;
  background: #6CC63A;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.header-logo-text {
  font-size: 17px;
  font-weight: 600;
  color: #5A5F6B;
}

/* === PAGE CONTENT === */
.page-content {
  padding: 28px 16px 24px;
}

/* === CARDS === */
.card, .vt-card, .metric-card, .result-card, .info-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 0.5px solid #D4E8C2;
  box-shadow: 0 2px 12px rgba(27,91,138,0.09);
  padding: 16px;
  margin-bottom: 12px;
}

/* === METRIC GRID === */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.metric-card {
  text-align: center;
}
.metric-label {
  font-size: 11px;
  color: #3B6D11;
  font-weight: 600;
  margin-bottom: 6px;
}
.metric-value {
  font-size: 26px;
  font-weight: 600;
  color: #1B5B8A;
}
.metric-unit {
  font-size: 13px;
  font-weight: 400;
}
.metric-sub {
  font-size: 10px;
  color: #6CC63A;
  margin-top: 4px;
}
.metric-card.blue-bg, .metric-blue, .cal-box-blue {
  background: #1B5B8A !important;
  border-color: #1B5B8A !important;
}
.metric-card.blue-bg *, .metric-blue *, .cal-box-blue * {
  color: #ffffff !important;
}
.metric-card.green-bg, .metric-green, .cal-box-green {
  background: #6CC63A !important;
  border-color: #6CC63A !important;
}
.metric-card.green-bg *, .metric-green *, .cal-box-green * {
  color: #ffffff !important;
}

/* === PROGRESS === */
.progress-track, .progress-bar-bg {
  background: #EAF3DE;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  direction: rtl;
}
.progress-fill, .progress-inner {
  background: #6CC63A;
  height: 100%;
  border-radius: 999px;
  float: right;
}
.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #3B6D11;
  font-weight: 600;
  margin-bottom: 8px;
}

/* === BUTTONS === */
.btn-primary, button.btn-primary {
  background: #1B5B8A;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  text-align: center;
  direction: rtl;
}
.btn-secondary, button.btn-secondary {
  background: #6CC63A;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  text-align: center;
  direction: rtl;
}
.btn-outline, button.btn-outline {
  background: transparent;
  color: #1B5B8A;
  border: 1.5px solid #1B5B8A;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  text-align: center;
  direction: rtl;
}
.btn-brown, button.btn-brown {
  background: #8B5E3C;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  text-align: center;
  direction: rtl;
}
.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.btn-row .btn-primary, .btn-row .btn-secondary,
.btn-row .btn-outline, .btn-row .btn-brown {
  margin-bottom: 0;
}

/* === NUTRITION GRID === */
.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.nutrition-item {
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.nutrition-item.protein { background: #EAF3DE; border: 0.5px solid #C0DD97; }
.nutrition-item.carbs   { background: #E8F6FB; border: 0.5px solid #A8D8EA; }
.nutrition-item.fat     { background: #F5EDE3; border: 0.5px solid #D4B896; }
.nutrition-label { font-size: 10px; font-weight: 600; margin: 0 0 4px; display: block; }
.nutrition-item.protein .nutrition-label { color: #3B6D11; }
.nutrition-item.carbs   .nutrition-label { color: #4A9EBF; }
.nutrition-item.fat     .nutrition-label { color: #8B5E3C; }
.nutrition-value { font-size: 18px; font-weight: 600; display: block; }
.nutrition-item.protein .nutrition-value { color: #3B6D11; }
.nutrition-item.carbs   .nutrition-value { color: #0C3D5E; }
.nutrition-item.fat     .nutrition-value { color: #8B5E3C; }

/* === INPUTS === */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], textarea, select {
  direction: rtl;
  text-align: right;
  border: 1.5px solid #D4E8C2;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  width: 100%;
  background: #FFFFFF;
  color: #333333;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #1B5B8A;
}

/* === TAGS === */
.tag, .pill, .ingredient-tag {
  background: #EAF3DE;
  color: #3B6D11;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  margin: 3px;
}

/* === BADGES === */
.badge-pro {
  background: #1B5B8A;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  letter-spacing: 0.5px;
}
.badge-free {
  background: #EAF3DE;
  color: #3B6D11;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
}

/* === SECTION TITLE === */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: #3B6D11;
  margin: 0 0 10px;
  direction: rtl;
}

/* === DIVIDER === */
hr, .divider {
  border: none;
  border-top: 0.5px solid #D4E8C2;
  margin: 12px 0;
}

/* === CAMERA SPECIFIC === */
.camera-cta {
  background: #1B5B8A;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.camera-cta-text h3 { color: #ffffff; font-size: 15px; font-weight: 600; }
.camera-cta-text p { color: #EAF3DE; font-size: 12px; }
.camera-cta-btn {
  width: 44px; height: 44px;
  background: #6CC63A;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; flex-shrink: 0;
}

/* === FOOD LOG ENTRY === */
.food-entry, .log-entry, .meal-entry {
  background: #FFFFFF;
  border-radius: 16px;
  border: 0.5px solid #D4E8C2;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(27,91,138,0.06);
}

/* === CHART AREA === */
.chart-container, .chart-wrapper {
  background: #FFFFFF;
  border-radius: 16px;
  border: 0.5px solid #D4E8C2;
  padding: 14px;
  margin-bottom: 12px;
}

/* ============================================
   VITARO TARGETED OVERRIDES — actual class names
   ============================================ */

/* Body & phone frame */
.phone, .screen {
  background: #F0F4F8 !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Header */
.logoWrap, .header, .topBar {
  background: #F2F4FD !important;
  border-radius: 0 0 28px 28px !important;
  padding: 20px 20px 36px !important;
  color: #2C2C2A !important;
}
.logoWrap *, .header *, .topBar * {
  color: #2C2C2A !important;
}
.logoImgSmall, .logoImg {
  filter: none !important;
}

/* Titles & headings */
.title, .cardTitle, .hello {
  color: #5A5F6B !important;
  font-weight: 600 !important;
}
.subtitle, .hint, .tiny, .muted, .note {
  color: #888D99 !important;
}

/* KPI / metric cards */
.kpiRow {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.kpi {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 0.5px solid #D4E8C2 !important;
  box-shadow: 0 2px 12px rgba(27,91,138,0.09) !important;
  padding: 14px !important;
  text-align: center !important;
}
.kpiLabel {
  font-size: 11px !important;
  color: #3B6D11 !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}
.kpiValue {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #1B5B8A !important;
}

/* Cards */
.card {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 0.5px solid #D4E8C2 !important;
  box-shadow: 0 2px 12px rgba(27,91,138,0.09) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* Buttons — primary */
.btn.btnPrimary, button.btnPrimary, .btnPrimary {
  background: #1B5B8A !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Buttons — ghost/outline */
.btn.btnGhost, button.btnGhost, .btnGhost {
  background: transparent !important;
  color: #1B5B8A !important;
  border: 1.5px solid #1B5B8A !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Buttons — secondary / success / generic */
.btn.btnSecondary, button.btnSecondary, .btnSecondary,
.btn.btnSuccess, button.btnSuccess, .btnSuccess,
.splashBtn {
  background: #6CC63A !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Buttons — danger */
.btn.btnDanger, button.btnDanger, .btnDanger {
  background: #E24B4A !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Buttons — generic .btn fallback (green) */
.btn:not(.btnPrimary):not(.btnGhost):not(.btnSecondary):not(.btnSuccess):not(.btnDanger):not(.splashBtn) {
  background: #6CC63A !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Pill buttons (range: יום / 7 ימים / 30 ימים) */
.pillBtn {
  border-radius: 999px !important;
  background: transparent !important;
  color: #1B5B8A !important;
  border: 1.5px solid #1B5B8A !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.pillBtnActive, .pillBtn.active {
  background: #1B5B8A !important;
  color: #ffffff !important;
  border-color: #1B5B8A !important;
}

/* Button rows */
.btnRow, .btnRow2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.btnRow .btn, .btnRow2 .btn {
  margin-bottom: 0 !important;
}

/* Chip / tags */
.chip {
  background: #EAF3DE !important;
  color: #3B6D11 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
}

/* Divider */
.divider {
  border: none !important;
  border-top: 0.5px solid #D4E8C2 !important;
  height: auto !important;
  background: none !important;
  margin: 12px 0 !important;
}

/* Grid layouts — intentionally NOT overriding display type (each page uses its own layout) */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

/* miniRow / sumRow / row */
.miniRow {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #888D99 !important;
}
.sumRow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-top: 0.5px solid #D4E8C2 !important;
  font-weight: 600 !important;
  color: #1B5B8A !important;
}

/* Error / message boxes */
.errorBox, .error, .err {
  background: #FCEBEB !important;
  border: 0.5px solid #F09595 !important;
  border-radius: 12px !important;
  color: #A32D2D !important;
  padding: 12px !important;
}
.msg.ok, .ok { color: #3B6D11 !important; }
.link {
  color: #1B5B8A !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
}

/* ============================================
   food_log.html OVERRIDES
   ============================================ */
.wrap {
  background: #F0F4F8 !important;
  padding: 0 !important;
}
.centerTop {
  background: #F2F4FD !important;
  border-radius: 0 0 28px 28px !important;
  padding: 20px 20px 36px !important;
  color: #2C2C2A !important;
  text-align: center !important;
}
.centerTop * { color: #2C2C2A !important; }

/* ============================================
   update_weight.html OVERRIDES
   ============================================ */
.shell, .device {
  background: #F0F4F8 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.chartBox {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 0.5px solid #D4E8C2 !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
}
.inputWrap {
  position: relative !important;
  margin-bottom: 12px !important;
}
.logo {
  max-width: 120px !important;
  display: block !important;
  margin: 0 auto 12px !important;
}

/* ============================================
   index.html OVERRIDES
   ============================================ */
.hero {
  background: #F2F4FD !important;
  border-radius: 0 0 32px 32px !important;
  padding: 48px 24px 60px !important;
  text-align: center !important;
  color: #2C2C2A !important;
}
.hero * { color: #2C2C2A !important; }
.heroCard {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 0.5px solid #D4E8C2 !important;
  box-shadow: 0 2px 16px rgba(27,91,138,0.12) !important;
  padding: 24px !important;
  margin: -28px 16px 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
.heroNote {
  color: #888D99 !important;
  font-size: 13px !important;
  text-align: center !important;
}
.top {
  display: flex !important;
  justify-content: center !important;
  padding: 20px 20px 0 !important;
}
.footer {
  padding: 16px !important;
  text-align: center !important;
  color: #888D99 !important;
  font-size: 12px !important;
}
.actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 16px 16px !important;
}
.langGate {
  background: #F0F4F8 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 40px 24px !important;
}
.langGateTitle {
  color: #5A5F6B !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
.langHint {
  color: #888D99 !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
}
.langSelect {
  border: 1.5px solid #D4E8C2 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  width: 100% !important;
  background: #fff !important;
  margin-bottom: 12px !important;
}
.langApply {
  background: #1B5B8A !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 100% !important;
  cursor: pointer !important;
}

/* ============================================
   register.html OVERRIDES
   ============================================ */
.phoneRow {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.tinyInline {
  font-size: 11px !important;
  color: #888D99 !important;
  display: inline !important;
}

/* ============================================
   onboarding.html OVERRIDES
   ============================================ */
.field {
  margin-bottom: 14px !important;
}
.field label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #3B6D11 !important;
  margin-bottom: 6px !important;
}
.who {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 0.5px solid #D4E8C2 !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
}


/* ============================================
   HEADER SAFETY OVERRIDES — keep headers gray
   ============================================ */
.vt-header, .page-header, .app-header, .logo-header, .upgrade-hero,
.logoWrap, .header, .topBar, .centerTop, .hero {
  background: #F2F4FD !important;
  background-image: none !important;
  color: #2C2C2A !important;
}
.vt-header *, .page-header *, .app-header *, .logo-header *, .upgrade-hero *,
.logoWrap *, .header *, .topBar *, .centerTop *, .hero * {
  color: #2C2C2A !important;
}

/* VITARO_HEADER_FIX_BEGIN */
.vitaro-fixed-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.vitaro-fixed-header > *{
  margin-inline:auto !important;
}
.vitaro-fixed-header .vitaro-header-logo{
  display:block !important;
  order:-10 !important;
  margin:0 auto 12px auto !important;
  text-align:center !important;
}
.vitaro-fixed-header .vitaro-header-logo img,
.vitaro-fixed-header img[src*="logo"],
.vitaro-fixed-header img[src*="vitaro"],
.vitaro-fixed-header img[alt*="logo"],
.vitaro-fixed-header img[alt*="Logo"],
.vitaro-fixed-header img[alt*="Vitaro"]{
  display:block !important;
  order:-10 !important;
  margin:0 auto 12px auto !important;
  max-width:min(180px,55vw) !important;
  height:auto !important;
}
.vitaro-fixed-header h1,
.vitaro-fixed-header h2,
.vitaro-fixed-header h3,
.vitaro-fixed-header h4,
.vitaro-fixed-header h5,
.vitaro-fixed-header h6,
.vitaro-fixed-header p,
.vitaro-fixed-header span,
.vitaro-fixed-header div,
.vitaro-fixed-header a,
.vitaro-fixed-header strong,
.vitaro-fixed-header small,
.vitaro-fixed-header label{
  text-align:center !important;
  align-self:center !important;
  margin-inline:auto !important;
}
/* VITARO_HEADER_FIX_END */

/* VITARO_HEADER_CENTER_FIX_BEGIN */
.vitaro-fixed-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.vitaro-fixed-header .vitaro-header-logo{
  display:block !important;
  order:-100 !important;
  margin:0 auto 12px auto !important;
  text-align:center !important;
}
.vitaro-fixed-header .vitaro-header-logo img,
.vitaro-fixed-header img[src*="logo"],
.vitaro-fixed-header img[src*="vitaro"],
.vitaro-fixed-header img[alt*="logo"],
.vitaro-fixed-header img[alt*="Vitaro"]{
  display:block !important;
  margin:0 auto 12px auto !important;
  max-width:min(180px,55vw) !important;
  height:auto !important;
}
.vitaro-fixed-header h1,
.vitaro-fixed-header h2,
.vitaro-fixed-header h3,
.vitaro-fixed-header h4,
.vitaro-fixed-header h5,
.vitaro-fixed-header h6,
.vitaro-fixed-header p,
.vitaro-fixed-header span,
.vitaro-fixed-header div,
.vitaro-fixed-header a,
.vitaro-fixed-header strong,
.vitaro-fixed-header small,
.vitaro-fixed-header label{
  text-align:center !important;
  align-self:center !important;
  margin-inline:auto !important;
}
.vitaro-fixed-header [style*="text-align:right"],
.vitaro-fixed-header [style*="text-align: right"]{
  text-align:center !important;
}
/* VITARO_HEADER_CENTER_FIX_END */