/* ==========================================================================
   Tool Page — BnBuddy
   Interactive calculators / tools embedded in the blog-post (bp-) layout.
   Loads AFTER blog-post.css. Uses design-system tokens from homepage-v3.css.
   Prefix: calc- (calculator)

   Model mirrors blog-post.css: all styling lives here, page HTML is content
   only. Never add inline styles for calc- components — change them here so
   every tool page inherits the fix.
   ========================================================================== */

[class^="calc-"],
[class*=" calc-"] {
  box-sizing: border-box;
}

.calc-tool {
  --calc-danger: #b91c1c;
  --calc-danger-bg: #fef2f2;
  --calc-success: #047857;
  --calc-success-bg: #ecfdf5;
  --calc-success-line: #a7f3d0;
  --calc-warning: #92400e;
  --calc-warning-bg: #fffbeb;
}

/* ---------- Countdown (sits in the article header) ---------- */
.calc-countdown {
  margin: 28px 0 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 22px;
  border-radius: var(--bb-radius-lg);
  background: var(--bb-surface);
  border: 1px solid var(--bb-border-subtle);
}

.calc-countdown-item {
  text-align: center;
  min-width: 54px;
}

.calc-countdown-number {
  display: block;
  font-family: var(--bb-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bb-primary);
}

.calc-countdown-label {
  display: block;
  margin-top: 6px;
  font-family: var(--bb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-on-surface-variant);
}

.calc-countdown-sep {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--bb-outline-variant);
}

.calc-countdown.is-urgent .calc-countdown-number {
  color: var(--calc-danger);
}

.calc-countdown.is-expired {
  display: none;
}

.calc-expired-msg {
  display: none;
  margin: 28px 0 0;
  padding: 12px 20px;
  border-radius: var(--bb-radius-lg);
  background: var(--calc-warning-bg);
  border: 1px solid #fde68a;
  font-family: var(--bb-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--calc-warning);
}

.calc-countdown.is-expired ~ .calc-expired-msg {
  display: inline-block;
}

/* ---------- Tool shell (replaces the bp-hero image slot) ---------- */
.calc-tool {
  max-width: 800px;
  margin: 40px auto 0;
  padding: 0 32px;
  scroll-margin-top: 88px;
}

.calc-card {
  padding: 32px;
  border-radius: var(--bb-radius-xl);
  background: var(--bb-surface-card);
  box-shadow: var(--bb-shadow-card);
  border: 1px solid var(--bb-border-subtle);
}

/* Scoped under .calc-tool so it out-specifies `.breakdance h2` in
   global-settings.css, which otherwise forces the Poppins display size. */
.calc-tool .calc-card-title {
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--bb-font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bb-on-surface);
  text-transform: none;
}

.calc-tool .calc-card-title svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: var(--bb-primary);
}

/* ---------- Form ---------- */
.calc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.calc-input-full {
  grid-column: 1 / -1;
}

.calc-input-group label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--bb-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--bb-on-surface);
}

.calc-input-group input[type="number"],
.calc-input-group select {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border-radius: var(--bb-radius-md);
  border: 1px solid var(--bb-outline-variant);
  background: var(--bb-surface-container-lowest);
  font-family: var(--bb-font-body);
  font-size: 16px; /* 16px minimum stops iOS Safari zooming on focus */
  color: var(--bb-on-surface);
  transition: border-color var(--bb-duration-fast) var(--bb-ease),
              box-shadow var(--bb-duration-fast) var(--bb-ease);
  -webkit-appearance: none;
  appearance: none;
}

.calc-input-group select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23474554' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}

.calc-input-group input[type="number"]:focus,
.calc-input-group select:focus {
  outline: none;
  border-color: var(--bb-primary);
  box-shadow: var(--bb-focus-ring);
}

.calc-input-group input.has-error {
  border-color: var(--calc-danger);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

/* Currency prefix. The glyph is drawn in the wrapper's padding box and the
   input is inset to match, so the value never sits under the symbol. */
.calc-input-prefix {
  position: relative;
}

.calc-input-prefix::before {
  content: "$";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--bb-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--bb-on-surface-variant);
  pointer-events: none;
}

.calc-input-prefix input[type="number"] {
  padding-left: 30px;
}

/* Hide the spinner arrows — they shrink the usable tap area on the field. */
.calc-input-group input[type="number"]::-webkit-outer-spin-button,
.calc-input-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-input-group input[type="number"] {
  -moz-appearance: textfield;
}

/* ---------- Toggles ---------- */
.calc-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--bb-radius-md);
  background: var(--bb-surface);
}

.calc-toggle-row > label {
  margin: 0;
  cursor: pointer;
}

.calc-toggle {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 30px;
}

.calc-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.calc-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: var(--bb-radius-full);
  background: var(--bb-outline-variant);
  transition: background var(--bb-duration-fast) var(--bb-ease);
  pointer-events: none;
}

.calc-toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--bb-duration-fast) var(--bb-ease);
}

.calc-toggle input:checked + .calc-toggle-slider {
  background: var(--bb-primary);
}

.calc-toggle input:checked + .calc-toggle-slider::before {
  transform: translateX(22px);
}

.calc-toggle input:focus-visible + .calc-toggle-slider {
  box-shadow: var(--bb-focus-ring);
}

/* ---------- Situación radio group ---------- */
/* Three states, not a toggle: "which fee am I on" and "have I repriced" are
   separate questions, and a checkbox could only ever ask one of them. */
.calc-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Two classes deep on purpose: `.calc-input-group label` is (0,1,1) and would
   otherwise win, forcing display:block — which silently kills the gap and
   makes the mark an inline span, where width/height do not apply at all. */
.calc-input-group .calc-radio {
  position: relative; /* anchors the visually-hidden input; without it the
                         input escapes to a distant positioned ancestor and
                         focusing it can yank the page */
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 13px 14px;
  border-radius: var(--bb-radius-md);
  border: 1px solid var(--bb-outline-variant);
  background: var(--bb-surface-container-lowest);
  cursor: pointer;
  transition: border-color var(--bb-duration-fast) var(--bb-ease),
              background var(--bb-duration-fast) var(--bb-ease);
}

.calc-input-group .calc-radio:hover {
  border-color: var(--bb-primary);
}

.calc-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.calc-radio-mark {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--bb-outline-variant);
  background: #fff;
  transition: border-color var(--bb-duration-fast) var(--bb-ease);
}

.calc-radio-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bb-primary);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--bb-duration-fast) var(--bb-ease);
}

.calc-radio-text {
  display: block;
  font-family: var(--bb-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bb-on-surface);
}

/* Selection is carried by the dot, the border and the tint. Bolding the whole
   label on top of that made the longer options read as three heavy lines and
   swallowed the <strong> emphasis inside them. */
.calc-radio input:checked + .calc-radio-mark {
  border-color: var(--bb-primary);
}

.calc-radio input:checked + .calc-radio-mark::before {
  transform: translate(-50%, -50%) scale(1);
}

.calc-input-group .calc-radio:has(input:checked) {
  border-color: var(--bb-primary);
  background: var(--bb-surface);
}

.calc-input-group .calc-radio:focus-within {
  box-shadow: var(--bb-focus-ring);
}

.calc-radio-hint {
  margin-top: 10px;
}

/* ---------- "Ya estás al día" state ---------- */
/* This branch deliberately has no price and no copy button: the host has
   nothing left to change, so handing them a number invites a second raise. */
.calc-callout-success .calc-result-loss-text strong {
  color: var(--calc-success);
}

.calc-check-title {
  margin-top: 28px;
}

/* ---------- ISH: host is liable ---------- */
/* In the 13 states without a convenio this row stops being pass-through money
   and becomes an obligation, so it must not read like the neutral "+" rows. */
.calc-tax-line.is-host-liable {
  border-left: 3px solid var(--calc-warning);
  padding-left: 11px;
  background: var(--calc-warning-bg);
}

.calc-tax-line.is-host-liable .calc-tax-line-amount,
.calc-tax-line.is-host-liable strong {
  color: var(--calc-warning);
}

.calc-check-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calc-check-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--bb-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bb-on-surface);
}

.calc-check-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 11px;
  border: solid var(--calc-success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Submit ---------- */
.calc-btn {
  width: 100%;
  min-height: 54px;
  margin-top: 24px;
  padding: 15px 28px;
  border: none;
  border-radius: var(--bb-radius-lg);
  background: var(--bb-primary);
  color: var(--bb-on-primary);
  font-family: var(--bb-font-body);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bb-duration) var(--bb-ease),
              transform var(--bb-duration) var(--bb-ease),
              box-shadow var(--bb-duration) var(--bb-ease);
}

.calc-btn:hover {
  background: var(--bb-action-hover);
  transform: var(--bb-lift);
  box-shadow: var(--bb-shadow-pill);
}

.calc-btn:focus-visible {
  outline: none;
  box-shadow: var(--bb-focus-ring);
}

/* ---------- Results ---------- */
.calc-results {
  display: none;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--bb-border-subtle);
}

.calc-results.is-visible {
  display: block;
  animation: calcFadeUp 0.4s var(--bb-ease);
}

@keyframes calcFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-results.is-visible { animation: none; }
  .calc-btn:hover { transform: none; }
}

.calc-result-price {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--bb-radius-lg);
  background: var(--calc-success-bg);
  border: 1px solid var(--calc-success-line);
  text-align: center;
}

.calc-result-price-label {
  font-family: var(--bb-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--calc-success);
}

.calc-result-price-value {
  margin-top: 10px;
  font-family: var(--bb-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bb-on-surface);
}

.calc-result-price-sub {
  margin-top: 8px;
  font-family: var(--bb-font-body);
  font-size: 15px;
  color: var(--bb-on-surface-variant);
}

.calc-result-price-sub:empty {
  display: none;
}

.calc-result-copy {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--bb-radius-full);
  border: 1px solid var(--calc-success);
  background: transparent;
  font-family: var(--bb-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--calc-success);
  cursor: pointer;
  transition: background var(--bb-duration-fast) var(--bb-ease);
}

.calc-result-copy:hover {
  background: rgba(4, 120, 87, 0.08);
}

.calc-result-copy svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.calc-result-copy.is-copied {
  background: var(--calc-success);
  color: #fff;
  border-color: var(--calc-success);
}

/* ---------- Loss warning ---------- */
.calc-result-loss {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--bb-radius-md);
  background: var(--calc-danger-bg);
  border-left: 4px solid var(--calc-danger);
}

.calc-result-loss-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}

.calc-result-loss-text {
  font-family: var(--bb-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bb-on-surface);
}

.calc-result-loss-text strong {
  color: var(--calc-danger);
  font-weight: 700;
}

/* ---------- Tables ---------- */
/* A grid item's default `min-width: auto` lets a wide child (these tables)
   stretch the track past the viewport, so the whole page scrolls sideways
   instead of just the table. Pin both the item and the scroll container to 0. */
.bp-grid > .bp-article {
  min-width: 0;
}

.calc-result-table-wrap {
  position: relative;
  min-width: 0;
  max-width: 100%;
  margin-top: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.calc-result-table,
.calc-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bb-font-body);
  font-size: 15px;
}

.calc-result-table th,
.calc-result-table td,
.calc-data-table th,
.calc-data-table td {
  padding: 12px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--bb-border-subtle);
  color: var(--bb-on-surface-variant);
}

.calc-result-table th:first-child,
.calc-result-table td:first-child,
.calc-data-table th:first-child,
.calc-data-table td:first-child {
  text-align: left;
  white-space: normal;
  font-weight: 600;
  color: var(--bb-on-surface);
}

.calc-result-table thead th,
.calc-data-table thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bb-on-surface);
  border-bottom: 2px solid var(--bb-outline-variant);
}

.calc-result-table .col-danger {
  background: var(--calc-danger-bg);
}

.calc-result-table .col-success {
  background: var(--calc-success-bg);
}

.calc-result-table .row-highlight td {
  font-weight: 700;
  font-size: 16px;
  color: var(--bb-on-surface);
}

.calc-result-table .row-highlight .col-danger {
  color: var(--calc-danger);
}

.calc-result-table .row-highlight .col-success {
  color: var(--calc-success);
}

/* Scroll affordance — the payoff column is off-screen on phones, so say so. */
.calc-scroll-hint {
  display: none;
  margin-top: 8px;
  font-family: var(--bb-font-body);
  font-size: 13px;
  color: var(--bb-on-surface-variant);
}

/* ---------- Tax breakdown ---------- */
.calc-result-taxes {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--bb-radius-lg);
  background: var(--bb-surface);
}

/* Same reason as .calc-card-title — beats `.breakdance h3`. */
.calc-tool .calc-result-taxes-title {
  margin: 0 0 16px;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--bb-on-surface);
  text-transform: none;
}

.calc-tax-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-family: var(--bb-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bb-on-surface-variant);
  border-bottom: 1px solid var(--bb-border-subtle);
}

.calc-tax-line-amount {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--bb-on-surface);
}

.calc-tax-total {
  border-bottom: none;
  padding-top: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--bb-on-surface);
}

.calc-tax-total .calc-tax-line-amount {
  font-size: 20px;
  color: var(--calc-success);
}

.calc-tax-note {
  margin: 14px 0 0;
  font-family: var(--bb-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--bb-on-surface-variant);
}

/* ---------- Callouts (inside the article) ---------- */
.calc-callout {
  margin: 28px 0;
  padding: 18px 22px;
  border-radius: var(--bb-radius-md);
  border-left: 4px solid var(--bb-primary);
  background: var(--bb-surface);
}

.bp-article .calc-callout p {
  margin: 0;
  font-size: 16px;
}

.bp-article .calc-callout p + p {
  margin-top: 12px;
}

.calc-callout-warning {
  border-left-color: #d97706;
  background: var(--calc-warning-bg);
}

.calc-callout-success {
  border-left-color: var(--calc-success);
  background: var(--calc-success-bg);
}

.calc-callout-info {
  border-left-color: var(--bb-primary);
}

/* ---------- FAQ accordion ---------- */
.calc-faq-item {
  border-bottom: 1px solid var(--bb-border-subtle);
}

.calc-faq-item summary {
  padding: 18px 40px 18px 0;
  position: relative;
  list-style: none;
  cursor: pointer;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--bb-on-surface);
}

.calc-faq-item summary::-webkit-details-marker {
  display: none;
}

.calc-faq-item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 24px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--bb-primary);
  border-bottom: 2px solid var(--bb-primary);
  transform: rotate(45deg);
  transition: transform var(--bb-duration-fast) var(--bb-ease);
}

.calc-faq-item[open] summary::after {
  transform: rotate(-135deg);
  top: 28px;
}

.calc-faq-item summary:focus-visible {
  outline: none;
  box-shadow: var(--bb-focus-ring);
  border-radius: var(--bb-radius-sm);
}

.bp-article .calc-faq-answer p {
  margin: 0 0 18px;
  font-size: 16px;
}

/* ---------- Numbered lists ----------
   blog-post.css renders ol the same as ul (a dot per item), which is right for
   prose but loses the count on a step-by-step checklist. Opt back in here. */
.bp-article ol.calc-numbered,
.bp-article .calc-sources ol {
  counter-reset: calc-item;
}

.bp-article ol.calc-numbered > li,
.bp-article .calc-sources li {
  counter-increment: calc-item;
}

.bp-article ol.calc-numbered > li::before,
.bp-article .calc-sources li::before {
  content: counter(calc-item) ".";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--bb-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--bb-primary);
}

.bp-article .calc-sources li {
  font-size: 15px;
}

.bp-article .calc-sources li::before {
  font-size: 13px;
}

.calc-hint,
.calc-disclaimer {
  font-family: var(--bb-font-body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--bb-on-surface-variant);
}

.bp-article p.calc-hint {
  font-size: 14px;
}

.calc-disclaimer {
  margin: 32px 0 0;
  padding: 18px 20px;
  border-radius: var(--bb-radius-md);
  background: var(--bb-surface);
}

.bp-article p.calc-disclaimer {
  font-size: 13px;
  color: var(--bb-on-surface-variant);
}

.calc-updated {
  font-family: var(--bb-font-body);
  font-size: 13px;
  color: var(--bb-on-surface-variant);
}

/* ---------- Responsive: phone ---------- */
@media (max-width: 767px) {
  .calc-tool {
    padding: 0 20px;
    margin-top: 32px;
  }

  .calc-card {
    padding: 22px 18px;
  }

  .calc-tool .calc-card-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .calc-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .calc-countdown {
    margin-top: 24px;
    padding: 12px 16px;
    gap: 10px;
  }

  .calc-countdown-number {
    font-size: 26px;
  }

  .calc-result-price-value {
    font-size: 32px;
  }

  .calc-result-taxes {
    padding: 18px 16px;
  }

  .calc-tax-line {
    font-size: 14px;
  }

  .calc-scroll-hint {
    display: block;
  }
}