/* ═══════════════════════════════════════════
   car.css
   Car Loan EMI Calculator — component-specific styles
   Depends on: calc-global.css (load first)
═══════════════════════════════════════════ */

/* ── .fees-grid
   2-column layout for the four fee inputs (processing fee,
   insurance, maintenance, fuel). Not present in global because
   the global .fee-item is single-column (used by other calculators).
─────────────────────────────────────────── */
.fees-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: .9rem;
}


/* ── Touch-device tooltip suppression
   Hides the bar-chart hover tooltip on devices that
   don't support hover (phones/tablets). Global doesn't
   include this rule.
─────────────────────────────────────────── */
@media (hover: none) {
    .bar-tip { display: none !important; }
}


/* ═══════════════════════════════════════════
   RESPONSIVE OVERRIDES
   The global breakpoints are close but have small
   differences vs the original car calculator values.
   These overrides ensure pixel-perfect fidelity.
═══════════════════════════════════════════ */

/* ── 700 px breakpoint overrides ── */
@media (max-width: 700px) {

    /* Car uses .5rem .7rem; global uses .5rem .65rem */
    thead th,
    td { padding: .5rem .7rem; }

    /* Car collapses .ydp-grid to 1 column; global keeps 1fr 1fr */
    .ydp-grid { grid-template-columns: 1fr; }

    /* Car resets padding on both .cost-hd and .cost-grid together */
    .cost-hd,
    .cost-grid { padding: .85rem 1rem; }
}

/* ── 480 px breakpoint overrides ── */
@media (max-width: 480px) {

    /* Car uses the hard pixel value 12px; global uses .72rem.
       Keeping as px matches the original car layout exactly.  */
    .compare-result-table th,
    .compare-result-table td { padding: 6px 8px; font-size: 12px; }
}