/* === Shared Calculator Styles === */
/* Used by: Word Count→Page Count, UK Tax Calculator, Royalty Calculator Widget */

.bs-calc {
  max-width: 720px;
  margin: 32px auto;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 16px;
  padding: 28px 24px 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.bs-calc__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 6px;
  color: var(--color-text, #1a1a2e);
}
.bs-calc__subtitle {
  font-size: .88rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 20px;
  line-height: 1.5;
}
.bs-calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.bs-calc__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.bs-calc__grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.bs-calc__field label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-light, #666);
  margin-bottom: 6px;
}
.bs-calc__field input,
.bs-calc__field select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-text, #1a1a2e);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.bs-calc__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.bs-calc__field input[type="number"] {
  -moz-appearance: textfield;
}
.bs-calc__field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.bs-calc__field--full { grid-column: 1 / -1; }

/* Toggle switch */
.bs-calc__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.bs-calc__toggle input[type="checkbox"] {
  width: 40px;
  height: 22px;
  appearance: none;
  -webkit-appearance: none;
  background: #ccc;
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.bs-calc__toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.bs-calc__toggle input[type="checkbox"]:checked {
  background: var(--color-accent, #434de7);
}
.bs-calc__toggle input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}
.bs-calc__toggle span {
  font-size: .88rem;
  color: var(--color-text-light, #666);
}

/* Results area */
.bs-calc__results {
  background: var(--color-bg-alt, #f8f9fb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}
.bs-calc__results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bs-calc__results-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bs-calc__results-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bs-calc__result-item {
  text-align: center;
}
.bs-calc__result-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted, #888);
  margin-bottom: 4px;
}
.bs-calc__result-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
}
.bs-calc__result-value--green {
  color: var(--color-cta, #41a63e);
}
.bs-calc__result-value--accent {
  color: var(--color-accent, #434de7);
}
.bs-calc__result-note {
  font-size: .75rem;
  color: var(--color-text-muted, #888);
  margin-top: 2px;
}

/* Comparison table for royalty calc */
.bs-calc__compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: .9rem;
}
.bs-calc__compare th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted, #888);
  padding: 8px 12px;
  border-bottom: 2px solid var(--color-border, #e5e7eb);
}
.bs-calc__compare td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text, #1a1a2e);
}
.bs-calc__compare tr:last-child td { border-bottom: none; }
.bs-calc__compare .highlight {
  font-weight: 700;
  color: var(--color-cta, #41a63e);
}
.bs-calc__compare .muted {
  color: var(--color-text-muted, #888);
}

/* Highlight banner */
.bs-calc__highlight {
  background: linear-gradient(135deg, #eef8ee 0%, #e8f5e8 100%);
  border: 1px solid #c8e6c9;
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 16px;
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
  color: #2e7d32;
}
.bs-calc__highlight strong {
  font-size: 1.15rem;
}

/* Tax breakdown table */
.bs-calc__breakdown {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: .88rem;
}
.bs-calc__breakdown th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid var(--color-border, #e5e7eb);
  color: var(--color-text, #1a1a2e);
}
.bs-calc__breakdown td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.bs-calc__breakdown td:last-child {
  text-align: right;
  font-weight: 600;
}
.bs-calc__breakdown tr:last-child td {
  border-bottom: none;
  font-weight: 700;
  font-size: .95rem;
}
.bs-calc__breakdown .indent { padding-left: 24px; color: var(--color-text-light, #666); }

/* CTA button */
.bs-calc__cta {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 24px;
  background: var(--color-cta, #41a63e);
  color: #fff !important;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  transition: background .2s, transform .15s;
}
.bs-calc__cta:hover { background: #369933; transform: translateY(-1px); }

/* Warning messages */
.bs-calc__format-warning,
.bs-calc__page-warning {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: .85rem;
  color: #8d6e00;
  line-height: 1.5;
}

/* Note */
.bs-calc__note {
  font-size: .78rem;
  color: var(--color-text-muted, #888);
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 600px) {
  .bs-calc { padding: 20px 16px 24px; }
  .bs-calc__grid,
  .bs-calc__grid--3,
  .bs-calc__grid--4 { grid-template-columns: 1fr; }
  .bs-calc__results-grid,
  .bs-calc__results-grid--4 { grid-template-columns: 1fr 1fr; }
  .bs-calc__results-grid--2 { grid-template-columns: 1fr; }
  .bs-calc__result-value { font-size: 1.2rem; }
}