/* ==========================================================================
   MPP Heat Price Comparator – Frontend Styles (Bootstrap 5)
   Bootstrap handles layout, colour, and modal. Only project-specific
   overrides live here.
   ========================================================================== */

/* Block spacing */
.mpp-hpc-block {
    margin: 1.5rem 0;
}

/* Extra bottom padding so the absolute-positioned info button (bottom: 0.5 rem,
   height: 1.8 rem → top edge at 2.3 rem from card bottom) never overlaps
   grid content. 2.75 rem gives ~0.45 rem clearance above the button. */
.mpp-hpc-block .card-body {
    padding-bottom: 2.75rem;
}

/* Info button – absolute-positioned in the bottom-right corner of the card.
   Uses btn-outline-dark (#212529 on white = 15.43:1 contrast, WCAG AAA).
   btn-outline-secondary was only 4.69:1 – technically AA but flagged as
   borderline for a small icon button. */
.mpp-hpc-info-btn {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width:  1.8rem;
    height: 1.8rem;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Separator after the product column: bottom border when stacked (mobile),
   right border when side-by-side (sm+). */
.mpp-hpc-col--product {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

@media (min-width: 576px) {
    .mpp-hpc-col--product {
        border-bottom: none;
        border-right: 1px solid var(--bs-border-color, #dee2e6);
    }
}