/* ============================================================
   Calorie Calculator — WordPress Plugin v1.0
   Scoped to #calc2-app · !important on everything
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── Wrapper ─────────────────────────────────────────────── */
#calc2-app {
  font-family: 'DM Sans', sans-serif !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #0f172a !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1.5 !important;
  background: transparent !important;
}
#calc2-app *, #calc2-app *::before, #calc2-app *::after {
  box-sizing: border-box !important;
}
#calc2-app button {
  -webkit-appearance: none !important;
  appearance: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* ── Header ─────────────────────────────────────────────── */
#calc2-app .calc2-header {
  background: linear-gradient(135deg, #0d9488, #0f766e) !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 22px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
#calc2-app .calc2-header-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
}
#calc2-app .calc2-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #fff !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  background: none !important;
  border: none !important;
  display: block !important;
  text-transform: none !important;
  text-shadow: none !important;
}
#calc2-app .calc2-subtitle {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.80) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-weight: 400 !important;
}

/* ── Form ───────────────────────────────────────────────── */
#calc2-app .calc2-form {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-radius: 0 0 18px 18px !important;
  padding: 22px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Unit row */
#calc2-app .calc2-unit-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Field row: 2 columns */
#calc2-app .calc2-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

/* Single field */
#calc2-app .calc2-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Label */
#calc2-app .calc2-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}
#calc2-app .calc2-optional {
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  font-style: italic !important;
}

/* Toggle (unit + gender) */
#calc2-app .calc2-toggle {
  display: flex !important;
  background: #f1f5f9 !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 3px !important;
  border: 1.5px solid #e2e8f0 !important;
}
#calc2-app .calc2-toggle-btn {
  flex: 1 !important;
  padding: 8px 12px !important;
  border: none !important;
  border-radius: 7px !important;
  background: transparent !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  transition: all 0.18s !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.3 !important;
  display: block !important;
}
#calc2-app .calc2-toggle-btn:hover:not(.active) {
  background: rgba(13,148,136,0.08) !important;
  color: #0d9488 !important;
}
#calc2-app .calc2-toggle-btn.active {
  background: #0d9488 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(13,148,136,0.28) !important;
}

/* Number inputs */
#calc2-app .calc2-inp-wrap {
  position: relative !important;
}
#calc2-app .calc2-inp {
  width: 100% !important;
  padding: 11px 42px 11px 13px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  outline: none !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
  display: block !important;
  transition: border-color 0.18s !important;
}
#calc2-app .calc2-inp::-webkit-inner-spin-button,
#calc2-app .calc2-inp::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
#calc2-app .calc2-inp:focus {
  border-color: #0d9488 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
  outline: none !important;
}
#calc2-app .calc2-inp-unit {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #0d9488 !important;
  pointer-events: none !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Select */
#calc2-app .calc2-select-wrap {
  position: relative !important;
}
#calc2-app .calc2-select {
  width: 100% !important;
  padding: 11px 38px 11px 13px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  display: block !important;
  transition: border-color 0.18s !important;
}
#calc2-app .calc2-select:focus {
  border-color: #0d9488 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
  outline: none !important;
}
#calc2-app .calc2-chevron {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

/* Formula buttons */
#calc2-app .calc2-formula-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
#calc2-app .calc2-formula-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 11px 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.18s !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: left !important;
}
#calc2-app .calc2-formula-btn:hover:not(.active) {
  border-color: #0d9488 !important;
  background: #f0fdfa !important;
}
#calc2-app .calc2-formula-btn.active {
  border-color: #0d9488 !important;
  background: #f0fdfa !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.10) !important;
}
#calc2-app .calc2-formula-name {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: block !important;
  line-height: 1.2 !important;
}
#calc2-app .calc2-formula-btn.active .calc2-formula-name { color: #0d9488 !important; }
#calc2-app .calc2-formula-note {
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Error */
#calc2-app .calc2-error {
  padding: 10px 14px !important;
  background: #fef2f2 !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 0.84rem !important;
  color: #991b1b !important;
  font-weight: 500 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Submit button */
#calc2-app .calc2-btn {
  width: 100% !important;
  padding: 14px !important;
  background: #0d9488 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(13,148,136,0.35) !important;
  transition: background 0.18s, transform 0.18s !important;
  outline: none !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  display: block !important;
}
#calc2-app .calc2-btn:hover {
  background: #0f766e !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
#calc2-app .calc2-btn:active { transform: translateY(0) !important; }

/* ── Result ─────────────────────────────────────────────── */
#calc2-app .calc2-result {
  margin-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* BMR + TDEE summary */
#calc2-app .calc2-summary {
  background: linear-gradient(135deg, #0d9488, #0f766e) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  box-shadow: 0 6px 20px rgba(13,148,136,0.25) !important;
}
#calc2-app .calc2-summary-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
#calc2-app .calc2-summary-card--tdee { align-items: flex-end !important; }
#calc2-app .calc2-summary-divider {
  width: 1px !important;
  height: 60px !important;
  background: rgba(255,255,255,0.25) !important;
  margin: 0 22px !important;
  flex-shrink: 0 !important;
}
#calc2-app .calc2-summary-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.70) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  display: block !important;
}
#calc2-app .calc2-summary-val {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #fff !important;
  display: block !important;
  line-height: 1 !important;
}
#calc2-app .calc2-summary-unit {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.70) !important;
  font-weight: 500 !important;
  display: block !important;
}
#calc2-app .calc2-summary-note {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.7rem !important;
  color: rgba(255,255,255,0.60) !important;
  font-style: italic !important;
  display: block !important;
  margin-top: 2px !important;
}
#calc2-app .calc2-summary-card--tdee .calc2-summary-note { text-align: right !important; }

/* Table */
#calc2-app .calc2-table-wrap {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
#calc2-app .calc2-table-head {
  display: grid !important;
  grid-template-columns: 1fr auto auto auto !important;
  gap: 0 !important;
  padding: 10px 16px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
#calc2-app .calc2-table-head span:nth-child(2),
#calc2-app .calc2-table-head span:nth-child(3),
#calc2-app .calc2-table-head span:nth-child(4) {
  text-align: right !important;
  min-width: 80px !important;
}
#calc2-app .calc2-table-body {
  display: flex !important;
  flex-direction: column !important;
}
#calc2-app .calc2-table-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto auto !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s !important;
  animation: calc2RowIn 0.35s ease both !important;
}
#calc2-app .calc2-table-row:last-child { border-bottom: none !important; }
#calc2-app .calc2-table-row:hover { background: #f8fffe !important; }

/* Maintain row highlight */
#calc2-app .calc2-table-row--maintain {
  background: #f0fdfa !important;
  border-left: 3px solid #0d9488 !important;
}
#calc2-app .calc2-table-row--maintain:hover { background: #e6fffa !important; }

@keyframes calc2RowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
#calc2-app .calc2-table-row:nth-child(1) { animation-delay: 0.04s !important; }
#calc2-app .calc2-table-row:nth-child(2) { animation-delay: 0.08s !important; }
#calc2-app .calc2-table-row:nth-child(3) { animation-delay: 0.12s !important; }
#calc2-app .calc2-table-row:nth-child(4) { animation-delay: 0.16s !important; }
#calc2-app .calc2-table-row:nth-child(5) { animation-delay: 0.20s !important; }
#calc2-app .calc2-table-row:nth-child(6) { animation-delay: 0.24s !important; }
#calc2-app .calc2-table-row:nth-child(7) { animation-delay: 0.28s !important; }

/* Row cells */
#calc2-app .calc2-row-goal {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
#calc2-app .calc2-row-name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  display: block !important;
}
#calc2-app .calc2-row-change {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: block !important;
}
/* Loss = red tint, gain = teal tint */
#calc2-app .calc2-table-row--loss .calc2-row-change   { color: #ef4444 !important; }
#calc2-app .calc2-table-row--gain .calc2-row-change   { color: #0d9488 !important; }

#calc2-app .calc2-row-cal {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #0f172a !important;
  text-align: right !important;
  min-width: 90px !important;
  display: block !important;
}
#calc2-app .calc2-table-row--maintain .calc2-row-cal { color: #0d9488 !important; }

#calc2-app .calc2-row-pct {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-align: right !important;
  min-width: 52px !important;
  display: block !important;
}
#calc2-app .calc2-table-row--maintain .calc2-row-pct { color: #0d9488 !important; }

/* Progress bar inside row */
#calc2-app .calc2-row-bar-wrap {
  grid-column: 1 / -1 !important;
  padding-top: 6px !important;
}
#calc2-app .calc2-row-bar {
  height: 4px !important;
  background: #e2e8f0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
#calc2-app .calc2-row-bar-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Table note */
#calc2-app .calc2-table-note {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Recalculate */
#calc2-app .calc2-recalc {
  background: transparent !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  transition: all 0.18s !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.3 !important;
  display: inline-block !important;
  align-self: flex-start !important;
}
#calc2-app .calc2-recalc:hover {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  background: #f0fdfa !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 500px) {
  #calc2-app .calc2-form        { padding: 18px 16px 20px !important; }
  #calc2-app .calc2-header      { padding: 18px 16px !important; border-radius: 14px 14px 0 0 !important; }
  #calc2-app .calc2-title       { font-size: 1.3rem !important; }
  #calc2-app .calc2-field-row   { grid-template-columns: 1fr !important; }
  #calc2-app .calc2-formula-group { grid-template-columns: 1fr !important; }
  #calc2-app .calc2-formula-btn { flex-direction: row !important; align-items: center !important; gap: 8px !important; }
  #calc2-app .calc2-summary     { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  #calc2-app .calc2-summary-divider { width: 100% !important; height: 1px !important; margin: 0 !important; }
  #calc2-app .calc2-summary-card--tdee { align-items: flex-start !important; }
  #calc2-app .calc2-summary-card--tdee .calc2-summary-note { text-align: left !important; }
  #calc2-app .calc2-table-head  { display: none !important; }
  #calc2-app .calc2-table-row   { grid-template-columns: 1fr auto !important; }
  #calc2-app .calc2-row-pct     { display: none !important; }
  #calc2-app .calc2-row-bar-wrap { display: none !important; }
}