/* Calculator presentation uses the host theme's design tokens where available. */
.ruc-calculator {
    --ruc-text: var(--color-text, #14181f);
    --ruc-muted: var(--color-muted, #66707d);
    --ruc-brand: var(--color-brand, #f68c25);
    --ruc-border: var(--color-border, rgba(20,24,31,.12));
    --ruc-surface: var(--color-surface, #f6f7f8);
    max-width: 900px;
    margin: 20px auto;
    padding: clamp(20px, 4vw, 40px);
    color: var(--ruc-text);
    background: #fff;
    border: 1px solid var(--ruc-border);
    border-radius: var(--radius-lg, 28px);
    box-shadow: var(--shadow-card, 0 24px 60px -36px rgba(14,17,22,.45));
    font-family: var(--font-body, Arial, sans-serif);
}
.ruc-calculator *, .ruc-calculator *::before, .ruc-calculator *::after { box-sizing: border-box; }
.ruc-calculator [hidden] { display: none !important; }
.ruc-calculator label { display: block; font-weight: 700; }
.ruc-lookup-row { display: flex; gap: 12px; margin: 12px 0 0; }
.ruc-calculator input, .ruc-calculator select {
    min-height: 52px;
    padding: 12px 16px;
    color: var(--ruc-text);
    background: #fff;
    border: 1px solid var(--ruc-border);
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
}
.ruc-lookup-row input { flex: 1; min-width: 0; letter-spacing: .06em; }
.ruc-calculator button {
    min-height: 52px;
    padding: 12px 24px;
    border: 0;
    border-radius: 12px;
    background: var(--ruc-brand);
    color: var(--color-ink, #0e1116);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.ruc-calculator button:hover:not(:disabled) { background: var(--color-brand-hover, #df7917); transform: translateY(-1px); }
.ruc-calculator button:disabled { opacity: .55; cursor: default; }
.ruc-calculator :is(input, select, button, a):focus-visible { outline: 3px solid var(--ruc-brand); outline-offset: 3px; }
.ruc-calculator [data-ruc-vehicle] { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--ruc-border); }
.ruc-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ruc-calculator .ruc-section-heading h3 { margin: 0; color: var(--ruc-text); font-family: var(--font-heading, Arial, sans-serif); font-size: clamp(20px, 3vw, 24px); font-weight: 800; line-height: 1.3; }
.ruc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ruc-grid > div { padding: 18px 20px; background: var(--ruc-surface); border: 1px solid var(--ruc-border); border-radius: 16px; }
.ruc-grid b, .ruc-grid label { display: block; color: var(--ruc-muted); font-size: 12px; font-weight: 600; }
.ruc-grid span { display: block; margin-top: 8px; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.ruc-grid select { width: 100%; margin-top: 8px; }
.ruc-distance-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); align-items: center; gap: 8px 20px; margin: 32px 0; padding: 24px; border: 1px solid var(--ruc-border); border-radius: var(--radius-md, 20px); }
.ruc-distance-section .ruc-section-heading { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.ruc-distance-section .ruc-distance { grid-column: 2; grid-row: 1; justify-self: end; }
.ruc-distance-section .ruc-section-description { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.ruc-section-description { margin: 0 0 20px; color: var(--ruc-muted); font-size: 14px; }
.ruc-distance { display: flex; width: min(100%, 300px); }
.ruc-distance input { flex: 1; width: 0; text-align: center; font-size: 20px; font-weight: 700; border-radius: 0; border-inline: 0; }
.ruc-distance button { flex: 0 0 52px; padding: 0; font-size: 24px; border-radius: 12px 0 0 12px; }
.ruc-distance button:last-child { border-radius: 0 12px 12px 0; }
.ruc-cost { padding: 8px 20px; border: 1px solid var(--ruc-border); border-radius: 16px; }
.ruc-cost > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; color: var(--ruc-muted); font-size: 14px; }
.ruc-cost > div + div { border-top: 1px solid var(--ruc-border); }
.ruc-cost b { color: var(--ruc-text); text-align: right; }
.ruc-note, .ruc-status { margin: 16px 0; color: var(--ruc-muted); font-size: 14px; line-height: 1.6; }
.ruc-error { margin: 16px 0; padding: 16px; border: 1px solid currentColor; border-radius: 12px; color: #b00020; font-size: 14px; line-height: 1.6; }
.ruc-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.ruc-provider { display: flex; flex-direction: column; padding: 24px 16px 16px; border: 1px solid var(--ruc-border); border-top: 3px solid var(--ruc-brand); border-radius: 16px; background: var(--ruc-surface); }
.ruc-calculator .ruc-provider h4 { margin: 0 0 20px; color: var(--ruc-text); font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.ruc-provider p { margin: 0 0 12px; color: var(--ruc-muted); font-size: 13px; line-height: 1.5; }
.ruc-provider p b { color: var(--ruc-text); white-space: nowrap; }
.ruc-provider strong { display: block; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ruc-border); color: var(--ruc-text); font-family: var(--font-heading, Arial, sans-serif); font-size: clamp(24px, 3vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ruc-disclaimer { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--ruc-border); color: var(--ruc-muted); font-size: 12px; line-height: 1.7; }
.ruc-calculator .ruc-disclaimer a, .ruc-calculator .ruc-disclaimer a:visited { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
    .ruc-distance-section { grid-template-columns: 1fr; gap: 16px; }
    .ruc-distance-section .ruc-section-description { grid-row: 2; }
    .ruc-distance-section .ruc-distance { grid-column: 1; grid-row: 3; justify-self: start; }
    .ruc-providers { grid-template-columns: 1fr; }
    .ruc-provider { padding: 20px; }
}
@media (max-width: 480px) {
    .ruc-lookup-row { flex-direction: column; }
    .ruc-grid { grid-template-columns: 1fr; }
    .ruc-distance-section { padding: 20px 16px; }
    .ruc-cost { padding-inline: 16px; }
    .ruc-cost > div { flex-direction: column; gap: 6px; }
    .ruc-cost b { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .ruc-calculator button { transition: none; }
    .ruc-calculator button:hover:not(:disabled) { transform: none; }
}

/* Provider branding; myRUC occupies the middle comparison column. */
.ruc-provider__logo { display: flex; align-items: center; justify-content: center; height: 64px; margin-bottom: 20px; }
.ruc-provider__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 56px; object-fit: contain; }
.ruc-provider--featured {
    border: 2px solid var(--ruc-brand);
    border-top-width: 3px;
    background: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ruc-brand) 12%, white), white 70%);
    box-shadow: var(--shadow-card, 0 24px 60px -36px rgba(14,17,22,.45));
}
.ruc-provider--featured strong { color: var(--ruc-text); border-top-color: var(--ruc-brand); }

/* Keep alternative providers visually quieter than myRUC. */
.ruc-provider--secondary { border-top: 0; }
.ruc-provider--secondary .ruc-provider__logo img { filter: grayscale(1); }