/* ── Brouns & Co Paint Calculator ── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Raleway:wght@300;400;500;600;700&display=swap');

.brns-calc-root *,
.brns-calc-root *::before,
.brns-calc-root *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; }

.brns-calc-root {
  font-family: 'Raleway', system-ui, sans-serif !important;
  color: #071724 !important;
  background: #fff !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 52px 28px 80px !important;
}

/* ── Typography ── */
.brns-title {
  font-family: "Raleway", Sans-serif !important;
  font-size: 41.33px !important;
  font-weight: 500 !important;
  line-height: 1.1em !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
  color: #071724 !important;
  text-align: center !important;
}
.brns-desc {
  font-size: 16px !important;
  color: #071724 !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;
  max-width: 500px !important;
  margin: 0 auto 44px !important;
  text-align: center !important;
}
.brns-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  color: #071724 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}
.brns-section-heading {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-style: italic !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  color: #071724 !important;
  margin-bottom: 18px !important;
}
.brns-results-heading {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-style: italic !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  color: #071724 !important;
  margin-bottom: 24px !important;
}

/* ── Divider ── */
.brns-divider { border: none !important; border-top: 1px solid #bfcafc !important; margin: 28px 0 !important; }

/* ── Info box ── */
.brns-info-box {
  background: #f7f8ff !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 11px 15px !important;
  font-size: 14px !important;
  color: #5a6690 !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
}

/* ── Project type grid ── */
.brns-type-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}
.brns-type-btn {
  background: #fff !important;
  background-color: #fff !important;
  color: #071724 !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 13px 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  transition: border-color 0.15s, background 0.15s, color 0.15s !important;
}
.brns-type-btn:hover {
  border-color: #071724 !important;
  background: #f0f3ff !important;
  background-color: #f0f3ff !important;
  color: #071724 !important;
  box-shadow: none !important;
}
.brns-type-btn.active {
  background: #071724 !important;
  background-color: #071724 !important;
  color: #fff !important;
  border-color: #071724 !important;
  box-shadow: none !important;
}
.brns-type-btn .btn-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 3px !important;
  display: block !important;
  text-transform: none !important;
}
.brns-type-btn .btn-desc {
  font-size: 11px !important;
  color: #071724 !important;
  line-height: 1.4 !important;
  opacity: 0.55 !important;
  display: block !important;
}
.brns-type-btn.active .btn-desc { color: rgba(255,255,255,0.55) !important; opacity: 1 !important; }

/* ── Section ── */
.brns-section { margin-bottom: 32px !important; }

/* ── Blue box ── */
.brns-box {
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 16px 18px !important;
  background: #f7f8ff !important;
  background-color: #f7f8ff !important;
  margin-bottom: 10px !important;
}

/* ── Measure rows ── */
.brns-measure-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
}
.brns-row-label-wrap { padding-bottom: 10px !important; flex-shrink: 0 !important; }
.brns-surface-pill {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #071724 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: #f7f8ff !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
  display: inline-block !important;
}
.brns-plain-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #071724 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  width: 64px !important;
}
.brns-dim-group { display: flex !important; gap: 10px !important; align-items: flex-end !important; flex-wrap: wrap !important; }
.brns-dim-pair  { display: flex !important; flex-direction: column !important; }
.brns-dim-inputs { display: flex !important; gap: 4px !important; }
.brns-times { color: #bfcafc !important; font-size: 16px !important; padding-bottom: 10px !important; align-self: flex-end !important; }

/* ── Inputs ── */
.brns-input-narrow {
  width: 64px !important;
  padding: 9px 8px !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  font-size: 14px !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  color: #071724 !important;
  background: #fff !important;
  background-color: #fff !important;
  display: block !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: normal !important;
}
.brns-input-narrow:focus { border-color: #071724 !important; outline: none !important; box-shadow: none !important; }
.brns-input-wide {
  width: 100% !important;
  padding: 9px 10px !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  font-size: 14px !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  color: #071724 !important;
  background: #fff !important;
  background-color: #fff !important;
  display: block !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: normal !important;
}
.brns-input-wide:focus { border-color: #071724 !important; outline: none !important; box-shadow: none !important; }
.brns-input-narrow[type=number]::-webkit-inner-spin-button,
.brns-input-wide[type=number]::-webkit-inner-spin-button { -webkit-appearance: none !important; }
.brns-input-narrow[type=number],
.brns-input-wide[type=number] { -moz-appearance: textfield !important; }
.brns-input-note { font-size: 12px !important; color: #071724 !important; margin-top: 5px !important; }

/* ── Sub fields ── */
.brns-sub-fields { display: flex !important; gap: 12px !important; }
.brns-sub-fields > div { flex: 1 !important; }

/* ── Add / Remove buttons ── */
.brns-add-btn {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #071724 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  line-height: inherit !important;
  display: inline-block !important;
  width: auto !important;
  transition: color 0.15s !important;
}
.brns-add-btn:hover { color: #bfcafc !important; background: none !important; background-color: transparent !important; box-shadow: none !important; }
.brns-remove-btn {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #bfcafc !important;
  font-size: 20px !important;
  line-height: 1 !important;
  padding: 0 0 8px 0 !important;
  cursor: pointer !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  box-shadow: none !important;
  outline: none !important;
  align-self: flex-end !important;
  text-decoration: none !important;
  width: auto !important;
  transition: color 0.15s !important;
}
.brns-remove-btn:hover { color: #c00 !important; background: none !important; background-color: transparent !important; box-shadow: none !important; }

/* ── Tar Oil checkbox row ── */
.brns-checkbox-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  margin-bottom: 22px !important;
  padding: 14px 18px !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  background: #f7f8ff !important;
  background-color: #f7f8ff !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.brns-checkbox-row.checked { border-color: #071724 !important; background: #f0f4ff !important; background-color: #f0f4ff !important; }
.brns-checkbox-row input[type=checkbox] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #071724 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.brns-checkbox-title { font-size: 13px !important; font-weight: 700 !important; color: #071724 !important; letter-spacing: 0.02em !important; }
.brns-checkbox-note  { font-size: 12px !important; color: #071724 !important; margin-top: 3px !important; line-height: 1.5 !important; }

/* ── Select ── */
.brns-select {
  width: 100% !important;
  padding: 10px 40px 10px 14px !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  font-size: 15px !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  color: #071724 !important;
  background-color: #fff !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  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 d='M1 1l5 5 5-5' stroke='%23bfcafc' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: normal !important;
}
.brns-select:focus { border-color: #071724 !important; outline: none !important; box-shadow: none !important; }
.brns-select-note { font-size: 13px !important; color: #071724 !important; margin-top: 7px !important; }

/* ── Action row ── */
.brns-action-row { display: flex !important; gap: 10px !important; }
.brns-btn-calc {
  flex: 1 !important;
  background: #071724 !important;
  background-color: #071724 !important;
  color: #fff !important;
  border: 1px solid #071724 !important;
  border-radius: 2px !important;
  padding: 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  line-height: normal !important;
  display: block !important;
  width: auto !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.brns-btn-calc:hover {
  background: #bfcafc !important;
  background-color: #bfcafc !important;
  border-color: #bfcafc !important;
  color: #fff !important;
  box-shadow: none !important;
}
.brns-btn-reset {
  background: none !important;
  background-color: transparent !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  color: #071724 !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  line-height: normal !important;
  width: auto !important;
  transition: border-color 0.15s !important;
}
.brns-btn-reset:hover { border-color: #071724 !important; background: none !important; background-color: transparent !important; box-shadow: none !important; }

/* ── Results ── */
.brns-results { margin-top: 44px !important; }
.brns-breakdown {
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  background: #f7f8ff !important;
  background-color: #f7f8ff !important;
}
.brns-result-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin-bottom: 6px !important; }
.brns-result-row .rr-label { font-size: 14px !important; color: #071724 !important; }
.brns-result-row .rr-label.faint { color: #bfcafc !important; }
.brns-result-row .rr-value { font-size: 14px !important; font-weight: 500 !important; color: #071724 !important; letter-spacing: 0.02em !important; }
.brns-result-row .rr-value.bold { font-size: 15px !important; font-weight: 700 !important; }
.brns-inner-divider { border: none !important; border-top: 1px solid #bfcafc !important; margin: 10px 0 !important; }
.brns-result-section {
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
}
.brns-result-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.brns-result-title {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-style: italic !important;
  font-size: 18px !important;
  color: #071724 !important;
}
.brns-result-subtitle {
  font-size: 12px !important;
  color: #071724 !important;
  margin-left: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.brns-result-liters { font-size: 22px !important; font-weight: 700 !important; color: #071724 !important; letter-spacing: -0.01em !important; }
.brns-result-inner-divider { border: none !important; border-top: 1px solid #bfcafc !important; margin-bottom: 14px !important; }
.brns-can-tags { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 10px !important; }
.brns-can-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 7px 14px !important;
  background: #fff !important;
  background-color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #071724 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}
.brns-can-tag-icon { font-size: 14px !important; color: #071724 !important; }
.brns-cans-total { font-size: 13px !important; color: #071724 !important; }
.brns-legend {
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 13px 16px !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  color: #071724 !important;
  line-height: 1.7 !important;
  background: #f7f8ff !important;
  background-color: #f7f8ff !important;
}
.brns-tip {
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  padding: 13px 16px !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  color: #6a7490 !important;
  line-height: 1.7 !important;
  background: #f7f8ff !important;
  background-color: #f7f8ff !important;
}
.brns-shop-ctas { display: flex !important; gap: 10px !important; margin-top: 28px !important; }
.brns-cta-primary {
  flex: 1 !important;
  background: #071724 !important;
  background-color: #071724 !important;
  color: #fff !important;
  border: 1px solid #071724 !important;
  border-radius: 2px !important;
  padding: 12px 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  text-align: center !important;
  display: block !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  line-height: normal !important;
}
.brns-cta-primary:hover,
.brns-cta-primary:visited,
.brns-cta-primary:active {
  background: #bfcafc !important;
  background-color: #bfcafc !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.brns-cta-secondary {
  flex: 1 !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px solid #bfcafc !important;
  border-radius: 2px !important;
  color: #071724 !important;
  padding: 12px 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  text-align: center !important;
  display: block !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  line-height: normal !important;
}
.brns-cta-secondary:hover,
.brns-cta-secondary:visited,
.brns-cta-secondary:active {
  color: #071724 !important;
  text-decoration: none !important;
  border-color: #071724 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .brns-calc-root { padding: 32px 16px 60px !important; }
  .brns-type-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .brns-measure-row { flex-wrap: wrap !important; gap: 10px !important; }
  .brns-dim-group { flex-wrap: wrap !important; }
  .brns-sub-fields { flex-direction: column !important; gap: 10px !important; }
  .brns-result-head { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .brns-shop-ctas { flex-direction: column !important; }
  .brns-can-tags { flex-direction: column !important; align-items: flex-start !important; }
}