/* ==========================================================================
   calculator.css — Calorie & Macro Calculator Styles (index.html only)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Floating Card Container
   -------------------------------------------------------------------------- */
.calc__wrapper {
  background-color: var(--color-surface-lowest);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.calc__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.calc__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.calc__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc__group--wide {
  grid-column: 1 / -1;
}

.calc__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calc__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.calc__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-low);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -moz-appearance: textfield;
}

.calc__input::-webkit-outer-spin-button,
.calc__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.calc__input.calc__input--error {
  border-color: var(--color-red);
}

.calc__unit {
  position: absolute;
  right: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  pointer-events: none;
}

.calc__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-low);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  cursor: pointer;
  appearance: auto;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.calc__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.calc__error {
  font-size: var(--text-xs);
  color: var(--color-red);
  min-height: 1em;
  display: block;
}

/* --------------------------------------------------------------------------
   Results Panel
   -------------------------------------------------------------------------- */
.calc__results {
  background-color: var(--color-surface-low);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.calc__results-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

/* Summary rows */
.calc__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc__summary-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-high);
}

.calc__summary-item--primary {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-xl);
}

.calc__summary-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

.calc__summary-item--primary .calc__summary-label {
  color: var(--color-primary-text);
  opacity: 0.85;
}

.calc__summary-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1;
}

.calc__summary-unit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.calc__summary-item--primary .calc__summary-unit {
  color: var(--color-primary-text);
  opacity: 0.7;
}

/* Macros Grid */
.calc__macros-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.macros-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.macro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface-lowest);
  gap: var(--space-1);
  box-shadow: var(--shadow-sm);
}

.macro-card__icon {
  font-size: var(--text-2xl);
  line-height: 1;
}

.macro-card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.macro-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text-primary);
}

.macro-card__unit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.macro-card__kcal {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Disclaimer */
.calc__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .calc__wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .calc__wrapper {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    gap: var(--space-6);
    overflow: hidden;
    width: 100%;
  }

  .calc__fields {
    grid-template-columns: 1fr;
  }

  .calc__group--wide {
    grid-column: 1;
  }

  .calc__results {
    padding: var(--space-4);
  }

  /* Label on own line, value + unit sit together below it */
  .calc__summary-item {
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
  }

  .calc__summary-label {
    flex: 0 0 100%;
    order: -1;
    font-size: var(--text-xs);
    line-height: 1.3;
  }

  .calc__summary-value {
    font-size: var(--text-xl);
    flex: none;
  }

  .calc__summary-unit {
    font-size: var(--text-xs);
    flex: none;
  }

  .macros-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .macro-card {
    padding: var(--space-4) var(--space-2);
  }

  .macro-card__value {
    font-size: var(--text-xl);
  }
}

/* --------------------------------------------------------------------------
   Post-Calculator Instagram CTA
   -------------------------------------------------------------------------- */
.calc__cta {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background-color: var(--color-surface-low);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.calc__cta-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}