/* <editor-fold desc="Shared: template-parts/tarif-cards-block.php — header-banded tarif-card grid.
   Scoped to the component's own inner classes (not a page or wrapper_class), since wrapper_class
   varies per caller (e.g. template_rates.php overrides it to 'rates-cards-block'). Includes mobile
   behavior (horizontal scroll) — every current caller uses the same pattern, ported byte-for-byte
   from front-page_v4.css/front-page_v3.css/rates-page.css/invoicing-page.css, which all agreed."> */
.tarif-cards {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 40px;
}
.tarif-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 32px;
    background: #fff;
    border: 1px solid #cad3da;
    border-radius: 8px;
    overflow: hidden;
}
.tarif-card.-featured { flex: 0 0 416px; }

.tarif-card-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
}
.tarif-card-icon {
    font-size: 24px;
    line-height: 1;
}
.tarif-card-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.tarif-card-desc { color: #4e4c4c; }
.tarif-card-desc a { color: inherit; text-decoration: underline; }

.tarif-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;
}
.tarif-card.-featured .tarif-card-content { min-height: 158px; }

.tarif-percent-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tarif-percent,
.tarif-percent-label { color: #221f1f; }

.tarif-bullet-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tarif-bullet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.tarif-bullet-icon:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #221f1f;
}
.tarif-bullet-text { color: #221f1f; }

.tarif-card-btn { padding: 24px; margin-top: auto; }
.tarif-card-btn .btn { width: 100%; }

@media (max-width: 1300px) {
    .tarif-cards {
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        margin-left: 0;
        margin-right: 0;
        padding-top: 24px;
        overflow-x: auto;
    }
    .tarif-card,
    .tarif-card.-featured { flex: none; width: 416px; }
    .tarif-card.-featured .tarif-card-content { min-height: 0; }
}
@media (max-width: 576px) {
    .tarif-cards {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .tarif-card,
    .tarif-card.-featured { width: 90%; }
}
/* </editor-fold> */