/* ===== FO4 — Customer Lifetime Value calculator ===== */
/* Restyled into the gaffer-tape design system. Every rule is scoped
   under .ltv-tool so the tool's generic class names (.cell-input,
   .summary-bar, .advanced-toggle …) cannot collide with the theme.
   The table rows are built in assets/js/ltv.js; the class names there
   are styled here. Loaded only on the "Tool — Customer Lifetime Value
   Calculator" page template (see inc/enqueue.php). */

.ltv-tool {
  --ltv-good: #2F6B45;
  --ltv-good-line: rgba(47, 107, 69, 0.32);
  --ltv-good-bg: rgba(47, 107, 69, 0.07);
  --ltv-warn: var(--gold-deep);
  --ltv-warn-line: rgba(193, 132, 26, 0.42);
  --ltv-warn-bg: rgba(232, 164, 28, 0.09);
  --ltv-bad: var(--burgundy);
  --ltv-bad-line: rgba(122, 46, 60, 0.32);
  --ltv-bad-bg: rgba(122, 46, 60, 0.06);
}

/* ---- Heading + actions ---- */
.ltv-tool .ltv-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: end;
  margin: 44px 0 36px;
}

/* ---- Card shell ---- */
.ltv-tool .calc-card {
  border: 1px solid var(--hairline-dark-strong);
  background: var(--cream-rise);
}
.ltv-tool .calc-card-header {
  background: var(--charcoal-deep);
  padding: 20px 28px;
}
.ltv-tool .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ltv-tool .ltv-sheet-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.ltv-tool .header-actions { display: flex; gap: 10px; }

.ltv-tool .btn-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ltv-tool .btn-header .btn-icon { font-size: 15px; line-height: 1; }
.ltv-tool .btn-add-client {
  background: var(--gold);
  color: var(--charcoal-deep);
  border-color: var(--gold);
  font-weight: 700;
}
.ltv-tool .btn-add-client:hover { background: var(--gold-warm); }
.ltv-tool .btn-reset-all {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--hairline-strong);
}
.ltv-tool .btn-reset-all:hover { border-color: var(--on-dark); }

/* ---- Table ---- */
.ltv-tool .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ltv-tool .table-container::-webkit-scrollbar { height: 8px; }
.ltv-tool .table-container::-webkit-scrollbar-track { background: var(--cream-deep); }
.ltv-tool .table-container::-webkit-scrollbar-thumb { background: var(--hairline-dark-strong); }

.ltv-tool .ltv-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}
.ltv-tool .ltv-table thead th {
  background: var(--cream-deep);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  text-align: left;
  border-bottom: 1px solid var(--hairline-dark-strong);
  white-space: nowrap;
  user-select: none;
}
.ltv-tool .ltv-table thead th:first-child { padding-left: 24px; width: 54px; }
.ltv-tool .ltv-table thead th.col-name { min-width: 190px; }
.ltv-tool .ltv-table thead th.col-number { min-width: 140px; }
.ltv-tool .ltv-table thead th.col-ltv { min-width: 150px; }
.ltv-tool .ltv-table thead th.col-actions { width: 56px; }
.ltv-tool .ltv-table thead th .th-sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-cream-mute);
  opacity: 0.7;
  margin-top: 3px;
}
.ltv-tool .ltv-table tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--hairline-dark);
  vertical-align: middle;
}
.ltv-tool .ltv-table tbody td:first-child { padding-left: 24px; }
.ltv-tool .ltv-table tbody tr { transition: background 150ms ease; }
.ltv-tool .ltv-table tbody tr:hover { background: rgba(20, 20, 20, 0.025); }

.ltv-tool .row-number {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--on-cream-mute);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-deep);
}

/* ---- Cell inputs ---- */
.ltv-tool .cell-input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-cream);
  background: #fff;
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 0;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -moz-appearance: textfield;
}
.ltv-tool .cell-input::-webkit-outer-spin-button,
.ltv-tool .cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ltv-tool .cell-input::placeholder { color: var(--on-cream-mute); opacity: 0.5; font-weight: 400; }
.ltv-tool .cell-input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(232, 164, 28, 0.15); }
.ltv-tool .cell-input.input-name { font-weight: 600; }

.ltv-tool .cell-currency-wrap,
.ltv-tool .cell-suffix-wrap { position: relative; }
.ltv-tool .cell-prefix {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--on-cream-mute);
  pointer-events: none;
}
.ltv-tool .cell-currency-wrap .cell-input { padding-left: 24px; }
.ltv-tool .cell-suffix {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  pointer-events: none;
}
.ltv-tool .cell-suffix-wrap .cell-input { padding-right: 44px; }

/* ---- Computed LTV cell ---- */
.ltv-tool .ltv-cell-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--on-cream-mute);
  white-space: nowrap;
  transition: color 300ms ease;
}
.ltv-tool .ltv-cell-value.calculated { color: var(--on-cream); }
.ltv-tool .ltv-cell-value.high { color: var(--ltv-good); }
.ltv-tool .ltv-cell-value.medium { color: var(--ltv-warn); }
.ltv-tool .ltv-cell-value.low { color: var(--ltv-bad); }

/* ---- Delete row ---- */
.ltv-tool .btn-delete-row {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  color: var(--on-cream-mute);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ltv-tool .btn-delete-row:hover {
  background: var(--ltv-bad-bg);
  border-color: var(--ltv-bad-line);
  color: var(--ltv-bad);
}

/* ---- Empty state + inline add ---- */
.ltv-tool .empty-state { text-align: center; padding: 56px 24px; }
.ltv-tool .empty-state h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  color: var(--on-cream);
  margin-bottom: 8px;
}
.ltv-tool .empty-state p {
  font-family: var(--body);
  font-size: 14px;
  color: var(--on-cream-dim);
  max-width: 380px;
  margin: 0 auto;
}
.ltv-tool .add-row-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  background: none;
  border: none;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ltv-tool .add-row-inline:hover { background: var(--cream); color: var(--on-cream); }

/* ---- Summary bar ---- */
.ltv-tool .summary-bar { display: none; background: var(--charcoal-deep); }
.ltv-tool .summary-bar.visible { display: block; }
.ltv-tool .summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ltv-tool .summary-stat {
  padding: 26px 24px;
  text-align: center;
  border-right: 1px solid var(--hairline);
}
.ltv-tool .summary-stat:last-child { border-right: none; }
.ltv-tool .summary-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: 10px;
}
.ltv-tool .summary-stat-value {
  font-family: var(--display);
  font-size: 38px;
  line-height: 0.95;
  color: var(--gold);
}
.ltv-tool .summary-stat-value.white { color: var(--on-dark); }
.ltv-tool .summary-stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--on-dark-mute);
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Advanced ---- */
.ltv-tool .advanced-section { margin-top: 28px; }
.ltv-tool .advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  background: var(--cream-rise);
  border: 1px solid var(--hairline-dark-strong);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-cream);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.ltv-tool .advanced-toggle:hover { background: var(--cream); border-color: var(--on-cream-mute); }
.ltv-tool .toggle-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal-deep);
  color: var(--on-dark);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ltv-tool .advanced-toggle.active .toggle-icon { transform: rotate(45deg); }

.ltv-tool .advanced-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
}
.ltv-tool .advanced-panel.open { max-height: 720px; opacity: 1; }
.ltv-tool .advanced-inner { padding-top: 18px; }
.ltv-tool .advanced-card {
  border: 1px solid var(--hairline-dark-strong);
  background: var(--cream-rise);
}
.ltv-tool .advanced-card-body { padding: 28px 30px; }

.ltv-tool .margin-input-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.ltv-tool .margin-field { flex: 0 0 230px; }
.ltv-tool .margin-field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  margin-bottom: 9px;
}
.ltv-tool .margin-field label span { opacity: 0.7; }
.ltv-tool .margin-input-wrap { position: relative; }
.ltv-tool .margin-input-wrap .cell-input {
  padding-right: 36px;
  font-size: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.ltv-tool .margin-input-wrap .suffix {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--on-cream-mute);
  pointer-events: none;
}

.ltv-tool .adv-results-row { flex: 1; display: flex; gap: 12px; min-width: 280px; }
.ltv-tool .adv-stat { flex: 1; padding: 16px 20px; text-align: center; border: 1px solid; }
.ltv-tool .adv-stat.profit { background: var(--ltv-good-bg); border-color: var(--ltv-good-line); }
.ltv-tool .adv-stat.cac { background: var(--ltv-warn-bg); border-color: var(--ltv-warn-line); }
.ltv-tool .adv-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ltv-tool .adv-stat.profit .adv-stat-label { color: var(--ltv-good); }
.ltv-tool .adv-stat.cac .adv-stat-label { color: var(--ltv-warn); }
.ltv-tool .adv-stat-value { font-family: var(--display); font-size: 32px; line-height: 0.95; }
.ltv-tool .adv-stat.profit .adv-stat-value { color: var(--ltv-good); }
.ltv-tool .adv-stat.cac .adv-stat-value { color: var(--ltv-warn); }

.ltv-tool .adv-explanation {
  display: none;
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--cream);
  border-left: 3px solid var(--gold-deep);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-cream-dim);
}
.ltv-tool .adv-explanation.visible { display: block; }
.ltv-tool .adv-explanation strong { color: var(--on-cream); font-weight: 700; }

/* ---- Insight bar ---- */
.ltv-tool .insight-bar {
  display: none;
  margin-top: 28px;
  padding: 20px 26px;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
}
.ltv-tool .insight-bar.visible { display: flex; }
.ltv-tool .insight-bar.high { background: var(--ltv-good-bg); border: 1px solid var(--ltv-good-line); color: var(--ltv-good); }
.ltv-tool .insight-bar.medium { background: var(--ltv-warn-bg); border: 1px solid var(--ltv-warn-line); color: var(--ltv-warn); }
.ltv-tool .insight-bar.low { background: var(--ltv-bad-bg); border: 1px solid var(--ltv-bad-line); color: var(--ltv-bad); }
.ltv-tool .insight-icon { font-size: 20px; font-weight: 700; flex-shrink: 0; line-height: 1.3; }
.ltv-tool .insight-bar strong { font-weight: 700; }

/* ---- Animations ---- */
@keyframes fo4-ltv-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fo4-ltv-row-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateX(20px); }
}
@keyframes fo4-ltv-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.ltv-tool .ltv-table tbody tr.entering { animation: fo4-ltv-row-in 0.3s ease forwards; }
.ltv-tool .ltv-table tbody tr.exiting { animation: fo4-ltv-row-out 0.25s ease forwards; }
.ltv-tool .summary-stat-value.pop { animation: fo4-ltv-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .ltv-tool .ltv-head { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 768px) {
  .ltv-tool .header-content { flex-direction: column; align-items: flex-start; }
  .ltv-tool .header-actions { width: 100%; }
  .ltv-tool .btn-header { flex: 1; justify-content: center; }
  .ltv-tool .summary-grid { grid-template-columns: 1fr 1fr; }
  .ltv-tool .summary-stat:nth-child(2) { border-right: none; }
  .ltv-tool .summary-stat:nth-child(1),
  .ltv-tool .summary-stat:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  .ltv-tool .margin-input-row { flex-direction: column; align-items: stretch; }
  .ltv-tool .margin-field { flex: 1 1 100%; }
  .ltv-tool .adv-results-row { flex-direction: column; min-width: 0; }
}