/* ===== Calorie Calculator — ported from CalorieCalculator.jsx ===== */
:root { --calc-chip-on: #6d28d9; }
html.dark { --calc-chip-on: #7c3aed; }

.calc-section-pad { padding: 24px 0; }
@media (max-width: 760px) { .calc-section-pad { padding: 16px 0; } }

.calc-wrap {
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body), 'Inter', sans-serif;
  padding: 40px 24px;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
html:not(.dark) .calc-wrap { box-shadow: 0 20px 50px rgba(20,20,45,.12); }

.calc-header { margin-bottom: 28px; }
.calc-eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.dark .calc-eyebrow { filter: drop-shadow(0 0 16px rgba(0,191,255,.35)); }
.calc-heading { font-size: 28px; font-weight: 700; margin: 0; line-height: 1.15; color: var(--ink); }
.calc-subheading { color: var(--ink-soft); font-size: 14px; margin-top: 10px; line-height: 1.5; }

.calc-sex-row { display: flex; gap: 8px; margin-bottom: 18px; }
.calc-toggle-btn {
  flex: 1; padding: 11px 10px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; font-size: 14px; font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.calc-toggle-btn.active {
  border-color: var(--calc-chip-on);
  background: var(--calc-chip-on);
  color: #fff;
  font-weight: 700;
}

.calc-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.calc-field { margin-bottom: 18px; }
.calc-label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; letter-spacing: 0.02em; }
.calc-input, .calc-select {
  width: 100%; background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 10px 12px; color: var(--ink); font-size: 15px; outline: none; box-sizing: border-box;
  font-family: inherit;
}
.calc-select { cursor: pointer; }

.calc-goal-row { display: flex; gap: 8px; }
.calc-goal-btn {
  flex: 1; padding: 11px 8px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; font-size: 13px; font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.calc-goal-btn.active {
  border-color: var(--calc-chip-on);
  background: var(--calc-chip-on);
  color: #fff;
  font-weight: 700;
}

.calc-error { color: #e5484d; font-size: 13px; margin-bottom: 14px; }

.calc-submit {
  width: 100%; padding: 15px; border-radius: 12px; border: none;
  background: var(--ink); color: var(--background); font-size: 16px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.02em; font-family: inherit;
  transform: scale(1); transition: transform 0.1s, background 0.1s;
}
.calc-submit:active { background: var(--ink-soft); transform: scale(0.97); }

.calc-result { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.calc-result[hidden] { display: none; }
.calc-target-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.calc-target-value { font-size: 36px; font-weight: 700; color: var(--ink); }
.calc-target-unit { font-size: 14px; color: var(--ink-soft); }

.calc-badge-row { display: flex; gap: 10px; margin-bottom: 22px; }
.calc-badge { flex: 1; background: var(--surface); border-radius: 20px; padding: 10px 14px; text-align: center; }
.calc-badge-value { font-size: 17px; font-weight: 700; color: var(--ink); }
.calc-badge-label { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.calc-macro-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.calc-macro-box { background: var(--surface); border-radius: 14px; padding: 16px 10px; text-align: center; }
.calc-macro-value { font-size: 28px; font-weight: 700; color: var(--ink); }
.calc-macro-label { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.calc-rings-row { display: flex; justify-content: center; gap: 24px; margin: 28px 0; }
.calc-ring { display: flex; flex-direction: column; align-items: center; }
.calc-ring-label { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.calc-ring-svg-wrap { position: relative; width: 112px; height: 112px; }
.calc-ring-svg-wrap svg { transform: rotate(-90deg); }
.calc-ring-track { stroke: var(--hairline); }
.calc-ring-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 22px; font-weight: 700; color: var(--ink); }
.calc-ring-energy { font-size: 11px; color: var(--ink-soft); margin-top: 8px; text-align: center; }

.calc-section-title {
  display: block; text-align: center;
  font-size: 17px; font-weight: 700; color: var(--ink);
  margin-bottom: 8px; margin-top: 28px;
}
.calc-p.calc-fact { margin-top: 16px; }
.calc-macro-heading { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 14px; margin-bottom: 4px; text-align: left; }
.calc-p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0; text-align: left; }
.calc-p strong { color: var(--ink); }

/* Steps wheel */
.calc-wheel-outer { position: relative; height: 138px; width: 100%; }
.calc-wheel-highlight {
  position: absolute; top: 46px; left: 10%; right: 10%; height: 46px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  pointer-events: none; z-index: 1;
}
.calc-wheel-fade { position: absolute; left: 0; right: 0; height: 46px; pointer-events: none; z-index: 2; }
.calc-wheel-fade-top { top: 0; background: linear-gradient(var(--card), transparent); }
.calc-wheel-fade-bottom { bottom: 0; background: linear-gradient(transparent, var(--card)); }
.calc-wheel-scroll {
  height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.calc-wheel-scroll::-webkit-scrollbar { display: none; }
.calc-wheel-pad { height: 46px; }
.calc-wheel-item {
  height: 46px; line-height: 46px; text-align: center;
  scroll-snap-align: center; cursor: pointer;
  color: var(--ink-soft); font-weight: 400; font-size: 15px; opacity: 0.35;
}
.calc-wheel-item.calc-wheel-item-center { color: var(--ink); font-weight: 700; opacity: 1; }

/* ===== «Считаем…» перед результатом — та же анимация, что у генератора рациона ===== */
.calc-loading {
  margin-top: 24px; padding: 26px 18px; border-radius: 14px; text-align: center;
  background: var(--surface); border: 1px solid var(--hairline); scroll-margin-top: 84px;
}
.calc-loading[hidden] { display: none; }
.calc-spin {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  border: 4px solid var(--hairline); border-top-color: var(--calc-chip-on); animation: calcSpin .9s linear infinite;
}
@keyframes calcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .calc-spin { animation: none; border-top-color: var(--neon-blue); } }
.calc-loading-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.calc-loading-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }
.calc-bar { height: 8px; border-radius: 99px; background: var(--hairline); overflow: hidden; margin: 0 0 16px; }
.calc-bar span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); transition: width 4s linear;
}
.calc-bar.go span { width: 100%; }
.calc-steps { list-style: none; margin: 0; padding: 0; text-align: left; display: inline-block; }
.calc-steps li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14.5px; color: var(--ink-soft); transition: color .2s; }
.calc-step-dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
}
.calc-steps li.active { color: var(--ink); }
.calc-steps li.active .calc-step-dot { border-color: var(--neon-blue); }
.calc-steps li.done { color: var(--ink); }
.calc-steps li.done .calc-step-dot { background: #17794b; border-color: #17794b; color: #fff; }
html.dark .calc-steps li.done .calc-step-dot { background: #5fd39b; border-color: #5fd39b; color: #06070f; }

/* ===== Следующий шаг: рацион питания ===== */
.calc-ration { margin-top: 32px; }
.calc-ration[hidden] { display: none; }
.calc-ration-promo { padding-top: 24px; border-top: 1px solid var(--hairline); }
.calc-ration-promo[hidden] { display: none; }
.calc-ration-promo .calc-section-title { margin-top: 0; }
.calc-ration-promo .calc-p { margin: 10px 0 16px; }

.calc-actions-row { display: flex; gap: 8px; margin-top: 24px; }
.calc-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px 4px; border-radius: 12px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink);
  font-size: 12px; font-weight: 600; font-family: inherit; text-align: center;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s, transform .1s;
}
.calc-action-btn:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--card)); }
.calc-action-btn:active { transform: scale(0.97); }
.calc-action-btn[disabled] { opacity: .6; cursor: wait; pointer-events: none; }
.calc-action-btn, .calc-action-btn-primary { background: var(--ink); color: var(--background); border-color: var(--ink); }
.calc-action-btn:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 26px -12px var(--glow-blue, rgba(0,191,255,.5)); }
#calc-btn-pdf { flex: 1 1 0; }
#calc-btn-consult { flex: 2.3 1 0; white-space: normal; line-height: 1.25; }
@media (min-width: 400px) { .calc-action-btn { font-size: 13px; padding: 12px 8px; } }
@media (min-width: 700px) { .calc-actions-row { gap: 10px; } .calc-action-btn { font-size: 13.5px; } }

/* ===== PDF export template — off-screen, forced-light printable copy of the
   result. Rendered to a canvas (html2canvas) and sliced across PDF pages
   (jsPDF), so emoji and the ring gauges show up exactly as on screen. ===== */
.calc-pdf-root {
  position: absolute; left: -99999px; top: 0; width: 760px;
  background: #ffffff; padding: 48px;
  font-family: var(--font-body), 'Inter', sans-serif;
  --background: #ffffff; --surface: #f2f3f8; --card: #ffffff;
  --ink: #0b0c10; --ink-soft: #5b5f6b; --hairline: #e6e8ef;
  color: var(--ink);
}
.calc-pdf-brand { font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.calc-pdf-brand span { color: #00bfff; }
.calc-pdf-doctitle { font-size: 26px; font-weight: 700; margin-top: 18px; line-height: 1.2; }
.calc-pdf-date { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; margin-bottom: 18px; }
.calc-pdf-formula {
  margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.6;
}
.calc-pdf-params-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.calc-pdf-params-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px;
  font-size: 13.5px; padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.calc-pdf-params-grid div span { color: var(--ink-soft); }
.calc-pdf-params-grid div strong { color: var(--ink); }

/* ===== responsive sizing — scale the panel up on larger screens instead of
   staying pinned at mobile width ===== */
@media (min-width: 700px) {
  .calc-wrap { max-width: 640px; padding: 52px 56px; }
  .calc-heading { font-size: 32px; }
  .calc-subheading { font-size: 15px; }
  .calc-target-value { font-size: 42px; }
  .calc-macro-value { font-size: 32px; }
}
@media (min-width: 1024px) {
  .calc-wrap { max-width: 820px; padding: 64px 72px; }
  .calc-heading { font-size: 38px; }
  .calc-subheading { font-size: 16px; max-width: 620px; }
  .calc-target-value { font-size: 48px; }
  .calc-macro-value { font-size: 34px; }
  .calc-rings-row { gap: 40px; }
  .calc-grid3 { gap: 16px; }
  .calc-badge-row { gap: 16px; }
  .calc-macro-row { gap: 16px; }
}

/* ===== match the rest of the site: same display font, panel radius, soft neon glow ===== */
.calc-section-pad { position: relative; isolation: isolate; overflow: hidden; }
.calc-section-pad::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 40% at 12% 10%, rgba(0, 191, 255, .13), transparent 70%), radial-gradient(42% 40% at 90% 70%, rgba(138, 43, 226, .13), transparent 70%);
}
.calc-wrap { border-radius: var(--radius-panel, 32px); border: 1px solid var(--hairline); }
.calc-heading { font-family: var(--font-display, 'Inter Tight', 'Inter', sans-serif); font-weight: 800; font-size: 34px; letter-spacing: -.035em; line-height: 1.06; }
.calc-eyebrow { font-weight: 700; letter-spacing: .16em; }
.calc-input, .calc-select { border-radius: 12px; }
.calc-toggle-btn.active, .calc-goal-btn.active { box-shadow: 0 10px 24px -10px rgba(109, 40, 217, .65); }