/* The car running cost calculator (SEO plan M07). Copied to www/assets/tools/ with the page once it is published.
   Uses site.css's tokens and logical properties, so one sheet serves Arabic and English. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.tool-noscript { padding: 16px 18px; border: 2px dashed var(--amber); border-radius: 14px; color: var(--amber-dark); font-size: 15px; margin-bottom: 24px; }

.tool-form { padding: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }

.tool-intro { color: var(--slate); font-size: 15px; line-height: 1.8; margin-bottom: 18px; }

.tool-form fieldset { border: 0; min-width: 0; }

.tool-currency { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }

.tool-currency legend { float: inline-start; font-weight: 700; color: var(--indigo); margin-inline-end: 8px; }

.tool-currency .tool-hint { flex-basis: 100%; margin-top: 0; }

.tool-field { padding-block: 16px; border-bottom: 1px solid var(--border); }

.tool-field:last-of-type { border-bottom: 0; }

.tool-field > label { display: block; font-weight: 600; color: var(--charcoal); font-size: 16px; }

.tool-hint { margin-top: 4px; color: var(--slate); font-size: 14px; line-height: 1.7; }

.tool-input { display: block; width: 100%; max-width: 280px; margin-top: 10px; padding: 11px 14px; font: inherit; font-size: 17px; color: var(--charcoal); background: var(--bg); border: 1px solid var(--border2); border-radius: 10px; }

.tool-input:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; background: var(--card); }

.tool-input[aria-invalid="true"] { border-color: #C0392B; background: #FDF1EF; }

.tool-period { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }

.tool-period legend { font-size: 14px; color: var(--slate); margin-bottom: 4px; width: 100%; }

.tool-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; cursor: pointer; }

.tool-choice input { width: 18px; height: 18px; accent-color: var(--indigo); }

.tool-error { margin-top: 8px; color: #B03A2E; font-size: 14px; font-weight: 600; }

.tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.tool-button { padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 600; color: var(--indigo); background: var(--indigo-tint); border: 1px solid var(--indigo-tint2); border-radius: 999px; cursor: pointer; }

.tool-button:hover { background: var(--indigo-tint2); }

.tool-form:not(.is-ready) .tool-actions { display: none; }

.tool-result { margin-top: 24px; padding: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }

.tool-result h2 { font-size: 20px; font-weight: 700; color: var(--indigo); }

.tool-prompt { color: var(--slate); font-size: 15.5px; }

.tool-warning { margin-top: 10px; padding: 10px 14px; background: var(--amber-tint); color: var(--amber-dark); border-radius: 10px; font-size: 15px; line-height: 1.7; }

.tool-totals { margin-top: 14px; }

.tool-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 10px; border-top: 1px solid var(--border); }

.tool-totals dt { color: var(--slate); font-size: 15.5px; }

.tool-totals dd { margin: 0; font-size: 22px; font-weight: 700; color: var(--charcoal); text-align: end; font-variant-numeric: tabular-nums; }

.tool-totals dd.tool-muted { font-size: 14.5px; font-weight: 400; }

.tool-muted { color: var(--slate); }

.tool-result > p.tool-muted { margin-top: 8px; font-size: 14.5px; }

.tool-table-wrap { margin-top: 18px; overflow-x: auto; }

.tool-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }

.tool-table th, .tool-table td { padding: 9px 8px; text-align: start; border-top: 1px solid var(--border); }

.tool-table thead th { color: var(--slate); font-weight: 600; border-top: 0; }

.tool-table tbody th { font-weight: 600; color: var(--charcoal); }

.tool-note { margin-top: 14px; color: var(--slate); font-size: 14px; line-height: 1.7; }

.tool-cta-link { display: inline-block; margin-top: 18px; color: #fff; text-decoration: underline; opacity: 0.9; }

/* An arithmetic line of the worked example, set left to right by its dir="ltr" (the Arabic page too), and kept on one
   line so "= 1.10" never wraps away from the rest. */
.tool-formula { white-space: nowrap; }

@media (max-width: 560px) {
  .tool-form, .tool-result { padding: 18px 16px; }
  .tool-input { max-width: none; }
  .tool-totals dd { font-size: 19px; }
  .tool-table { font-size: 13.5px; }
  .tool-table th, .tool-table td { padding: 8px 5px; }
  .tool-table .tool-entered { display: none; }
}

@media print {
  .site-header, .site-footer, .cta, .breadcrumbs, .tool-actions, .draft-banner, .consent-bar { display: none !important; }
  body { background: #fff; }
  .page-hero { padding-block: 0 8px; }
  .page-body.section { padding-block: 0; }
  .tool-form, .tool-result { border: 1px solid #ccc; break-inside: avoid; }
  .tool-input { border: 1px solid #999; background: #fff; }
}