/* ===== Cards ===== */

.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px var(--color-card-shadow);
}

.card h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-heading-accent);
  margin: 0 0 14px 0;
}

.card-heading-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fons-icon {
  width: 20px; height: 20px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
}

.top-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px 12px;
}

/* A card heading inside a top-row sits alongside other controls (toggles,
   selects, buttons) in a flex row — zero out the default .card h2 bottom
   margin so it aligns with them instead of pushing them down. */
.top-row h2 { margin: 0; }

/* Red/danger styling is intentional: reset clears everything you've
   entered, and shouldn't look like just another neutral pill button. */
.reset-btn {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.reset-btn:hover { background: var(--color-danger-hover); }

.bonus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-form);
  cursor: pointer;
  white-space: nowrap;
  margin-right: auto;
}

/* On/off switch. A real checkbox underneath (keyboard, form state and
   role="switch" all still work), drawn as a track with a sliding knob. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: var(--color-switch-off);
  cursor: pointer;
  transition: background-color .15s;
}
.switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-switch-knob);
  transition: transform .15s;
}
.switch:checked { background: var(--color-accent); }
.switch:checked::before { transform: translateX(14px); }
.switch:focus-visible { outline: 2px solid var(--color-input-focus-ring); outline-offset: 2px; }
.switch:disabled { opacity: .4; cursor: not-allowed; }
/* Each system gets its own "on" colour: Cashback green (matches the green
   "bonus" tags), First Buy yellow (matches its "Double!" tag); anything
   else, like the exchange-rate switch, stays the neutral accent purple. */
.switch--cashback:checked { background: var(--color-bonus-text); }
.switch--first-buy:checked { background: var(--color-switch-first-buy); }
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::before { transition: none; }
}

.currency-select {
  background: var(--color-pill-bg);
  border: 1px solid var(--color-pill-border);
  color: var(--color-pill-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.currency-select:focus { outline: 2px solid var(--color-input-focus-ring); }

/* Custom exchange-rate override row — sits under the top-row, only shown
   for a non-USD currency (see chain-purchase.js). */
.rate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: -6px 0 14px 0;
  font-size: 12.5px;
  color: var(--color-text-form);
}
.rate-input { width: 90px; }

/* ===== Purchase-chain pack table ===== */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 560px; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-faint);
  font-weight: 600;
  padding: 0 8px 8px 8px;
}

th.num, td.num { text-align: right; }

td {
  padding: 9px 8px;
  border-top: 1px solid var(--color-row-border);
  font-size: 14.5px;
  vertical-align: middle;
}

.tier-amt { font-weight: 600; color: var(--color-heading-strong); }
.tier-price { color: var(--color-text-muted); }
/* The tag's text changes with quantity and First Buy. width:0 + min-width:100%
   keeps it out of the table's column-width calculation (it just fills
   whatever width the Pack column already has and wraps), so changing the
   text never makes the columns jump. */
.tier-bonus-wrap { width: 0; min-width: 100%; }
/* In the mid-width table layout the Pack column is narrow enough for the tag
   to wrap to a second line, so reserve two lines to keep row heights fixed. */
@media (min-width: 641px) and (max-width: 900px) {
  .tier-bonus-wrap { min-height: 39px; }
}
.tier-bonus {
  font-size: 11.5px;
  color: var(--color-bonus-text);
  background: var(--color-bonus-bg);
  border-radius: 5px;
  padding: 1px 6px;
  display: inline-block;
  margin-top: 3px;
  font-weight: 600;
}
.tier-bonus.disabled {
  color: var(--color-bonus-disabled-text);
  background: var(--color-row-border);
  text-decoration: line-through;
}
/* First Buy leaves nothing for cashback to apply to on this row. */
.tier-bonus.blocked {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.double-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-form);
  cursor: pointer;
  white-space: nowrap;
}
.double-label:has(.switch:disabled) { cursor: not-allowed; }
.double-tag {
  font-size: 10.5px;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 6px;
  font-weight: 600;
}

.row-total { font-weight: 600; color: var(--color-total); }

/* ===== Form inputs (shared: qty, generation-chain rate/days/hours) ===== */

input[type="number"] {
  width: 58px;
  padding: 6px 8px;
  border: 1px solid var(--color-input-border);
  border-radius: 7px;
  font-size: 14px;
  text-align: center;
  font-family: inherit;
  background: var(--color-input-bg);
  color: var(--color-input-text);
}
input[type="number"]:focus { outline: 2px solid var(--color-input-focus-ring); border-color: var(--color-active-grad-start); }

/* ===== Generation-chain tab (e.g. Fons Generation) ===== */

.fons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

.fons-field label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-faint);
  font-weight: 600;
  margin-bottom: 6px;
}

.fons-field input[type="number"] {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
}

/* ===== Result stat cards (shared by every chain type) ===== */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat {
  background: linear-gradient(180deg, var(--color-stat-grad-start), var(--color-pill-bg));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.stat .label {
  font-size: 11px;
  color: var(--color-text-quiet);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.stat .value {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-heading-strong);
}

.stat .value.accent { color: var(--color-accent); }
.stat .sub { font-size: 12px; color: var(--color-text-faint); margin-top: 2px; }

.note {
  font-size: 12.5px;
  color: var(--color-text-quiet);
  line-height: 1.55;
  margin-top: 4px;
}

/* ===== Result hotbar =====
   A condensed echo of the Result card, fixed to the bottom of the viewport.
   Hidden by default (see [hidden] in layout.css); js/hotbar.js shows it via
   an IntersectionObserver on the real Result card, so it only appears once
   that card has scrolled out of view — no redundant totals when the full
   card is already on screen. */

.result-hotbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.result-hotbar-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 880px;
  width: 100%;
  background: var(--color-hotbar-bg);
  border: 1px solid var(--color-hotbar-border);
  border-radius: 14px;
  padding: 10px 20px;
  box-shadow: 0 8px 28px var(--color-hotbar-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hotbar-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

.hotbar-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-quiet);
  font-weight: 600;
}

.hotbar-value {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-heading-strong);
}

.hotbar-value.accent { color: var(--color-accent); }

@media (max-width: 480px) {
  .result-hotbar { padding-left: 10px; padding-right: 10px; }
  .result-hotbar-inner { gap: 14px; padding: 9px 14px; }
  .hotbar-label { font-size: 9.5px; }
  .hotbar-value { font-size: 14.5px; }
}

/* ===== Small-screen layout ===== */

@media (max-width: 560px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Below this, the pack table's 560px min-width would force a horizontal
   scroll to see qty/double/total/cost — instead, drop the table layout and
   render each row as a stacked card. Pack summary and the double-claim
   checkbox stay as self-labeled blocks; the remaining cells get a
   data-label (set in chain-purchase.js) that a ::before pseudo-element
   turns into an inline field label. */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  table { display: block; min-width: 0; }
  thead { display: none; }
  tbody { display: block; }
  tr {
    display: block;
    border: 1px solid var(--color-row-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  td {
    display: block;
    border-top: none;
    padding: 5px 0;
  }
  td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-faint);
    font-weight: 600;
  }
}

@media (max-width: 480px) {
  .fons-grid { grid-template-columns: 1fr; }
  .top-row { justify-content: flex-start; }
  /* Scoped to .top-row specifically: .bonus-toggle's label/checkbox style
     is also reused by the rate-row's "use my own exchange rate" toggle,
     which shouldn't be forced onto its own full-width line the same way. */
  .top-row .bonus-toggle { margin-right: 0; order: 3; flex-basis: 100%; }
}