/**
 * qa17-cloud-erp-checkmark-align.css
 * Pages: /en/erp-software/jtl-cloud-erp/                                (page 268013)
 *        /de/warenwirtschaftssystem-software/jtl-warenwirtschaft-cloud/ (page 114415)
 *        section.product-price-plan-section — the pricing cards' feature list.
 * Batch #17 item 4.
 *
 * Issue: in the dark pricing cards each feature is a `.dark-card-item__card-solution`
 * flex row = [`.card-arrow` teal check] + [`.card-solution-text`]. The row is
 * `display:flex` with the default cross-axis alignment (stretch), so on any row
 * whose text WRAPS to 2+ lines the arrow is pulled to the VERTICAL CENTRE of the
 * whole block (e.g. "Database backup every 60 minutes", "Server management incl.",
 * "Dedicated cloud for almost infinite scalability"). The check should sit next to
 * the FIRST line, not float in the gap between the two lines.
 *   (The CardPrice widget's own SCSS even opts INTO this centring:
 *    widgets/CardPrice/scss/_layout.scss `.card-arrow{display:flex;align-items:center}`
 *    — so wherever that build is loaded the arrow is centred. This sheet overrides
 *    it back to top-aligned per the ticket.)
 *
 * Fix: top-align the row items and nudge the 16px arrow down by 4px so its centre
 * lands on the cap-height of the first text line (line-height is 22-24px, arrow
 * 16px → (line-box − arrow)/2 ≈ 4px). Applied to BOTH the row (in case the arrow
 * inherits row alignment) and the arrow itself (in case the plugin makes the arrow
 * its own flex box).
 *
 * Scope: both erp cloud page-ids only (rule 4b / rule 18 — both languages, no leak).
 * `.dark-card-item__card-solution` / `.card-arrow` are shared CardPrice components
 * used on every pricing page, so every rule is gated on the two page bodies.
 */

body.page-id-268013 section.product-price-plan-section .dark-card-item__card-solution,
body.page-id-114415 section.product-price-plan-section .dark-card-item__card-solution {
    align-items: flex-start !important;
}

body.page-id-268013 section.product-price-plan-section .dark-card-item__card-solution .card-arrow,
body.page-id-114415 section.product-price-plan-section .dark-card-item__card-solution .card-arrow {
    align-self: flex-start !important;
    align-items: flex-start !important; /* keep the SVG at the top if .card-arrow is itself flex */
    margin-top: 4px !important;
}