/* ==========================================================================
   InPix.Me - Editing Time Calculator & Referral page styles (tokens only)
   ========================================================================== */

.calc-section {
  padding-block: var(--section-py-tight);
}

.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-8);
  align-items: stretch;
}

.calc-panel {
  background-color: var(--bg-deep);
  border: 1px solid var(--border-hairline);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.calc-panel h2,
.calc-results h2 {
  font-size: var(--fs-h3);
  margin-top: 0;
  margin-bottom: var(--space-6);
}

.calc-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.calc-fieldset + .calc-fieldset {
  margin-top: var(--space-8);
}

.calc-legend {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-primary);
  padding: 0;
  margin-bottom: var(--space-4);
}

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

.calc-hint {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.calc-error {
  font-size: var(--fs-small);
  color: var(--text-error);
  min-height: 0;
}

.calc-error:empty {
  display: none;
}

.form-control[aria-invalid="true"] {
  border-color: var(--text-error);
}

.calc-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.calc-option ~ .calc-option {
  margin-top: var(--space-3);
}

.calc-option:hover {
  border-color: var(--border-accent);
}

.calc-option:has(input:checked) {
  border-color: var(--border-accent);
  background-color: var(--accent-subtle);
}

.calc-option input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.15rem;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.calc-option input[type="checkbox"]:focus-visible,
.calc-panel .form-control:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.calc-option-title {
  display: block;
  color: var(--text-primary);
}

.calc-option-price {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.calc-culling-input {
  margin-block: var(--space-4);
}

.calc-culling-input[hidden] {
  display: none;
}

.calc-results {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.calc-result-list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}

.calc-result {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}

.calc-result dt {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.calc-result dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.calc-result--accent dd {
  color: var(--text-accent);
}

.calc-result-note {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.calc-disclaimer {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.calc-cta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---- Referral page ---- */
.ref-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.ref-step {
  background-color: var(--bg-deep);
  border: 1px solid var(--border-hairline);
  padding: var(--space-8);
}

.ref-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--text-accent);
  margin-bottom: var(--space-3);
}

.ref-step h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-3);
}

.ref-step p {
  color: var(--text-secondary);
}

.ref-rewards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.ref-reward {
  border: 1px solid var(--border-accent);
  background-color: var(--accent-subtle);
  padding: var(--space-8);
}

.ref-reward-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--text-accent);
}

.ref-reward-label {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-secondary);
}

.ref-terms {
  list-style: disc;
  padding-left: var(--space-6);
  color: var(--text-secondary);
}

.ref-terms li + li {
  margin-top: var(--space-2);
}

.ref-form-wrap {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* Honeypot: off-screen, not display:none so naive bots still fill it */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .calc-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .calc-grid,
  .ref-steps,
  .ref-rewards {
    grid-template-columns: 1fr;
  }
}