/**
 * Cart line-item layout — FunnelKit checkout sidebar.
 *
 * Implements the AFTER design from claude.ai/design (Cart Item Redesign):
 *   - Partner name surfaces under the title with a small icon, no label.
 *   - Credit Options renders as a single pill chip.
 *   - Bundle rate gets its own mint-green math callout below the chips.
 *   - Standard-rate overflow (mix-rate orders) gets a separate ember callout.
 *
 * Markup is emitted by WC_CF_Credit_Bundle_Cart_Item_Renderer hooked at
 * `wfacp_after_mini_cart_attributes` — fires only inside FK's mini-cart
 * template, so the design markup never leaks into the header mini-cart,
 * /cart/ standalone, or /my-account/orders surfaces.
 *
 * The default WC `<dl class="variation">` markup remains in the DOM
 * (downstream code that reads cart_item_data is unaffected) — we hide
 * it visually since our markup duplicates its content with the design
 * structure.
 *
 * Token bridge per feedback_design_handoff_token_alias_bridge.md:
 * the design references --mist / --ink / --graphite without the
 * --cfe-ds- prefix; alias here in the scope.
 */

/* Token alias bridge — applied directly to .cfe-line + the promoted row
   wrapper so the tokens resolve regardless of where the JS lands the
   element. Also applied to .wfacp_cart_title_sec for the title styling. */
.cfe-line,
.wfacp_mini_cart_items tr.cfe-line__row,
.wfacp_cart_title_sec {
    --fog:          var(--cfe-ds-color-fog,          #F4F5F7);
    --mist:         var(--cfe-ds-color-mist,         #E8EAED);
    --ink:          var(--cfe-ds-color-ink,          #1B2A3B);
    --graphite:     var(--cfe-ds-color-graphite,     #5B6573);
    --white:        var(--cfe-ds-color-white,        #FFFFFF);
    --tint-sky:     var(--cfe-ds-tint-sky,           #EFF6FF);
    --sky-text:     var(--cfe-ds-color-sky-text,     #3E8AB8);
    --mint-bg:      var(--cfe-ds-color-mint-bg,      #ECFDF5);
    --mint-border:  var(--cfe-ds-color-mint-border,  #6EE7B7);
    --mint-text:    var(--cfe-ds-color-mint-text,    #0F7A2A);
    --ember-bg:     var(--cfe-ds-color-ember-bg,     #FFF7ED);
    --ember-border: var(--cfe-ds-color-ember-border, #FCD9A0);
    --ember-text:   var(--cfe-ds-color-ember-text,   #B8541F);
    --radius-sm:    var(--cfe-ds-radius-sm,          8px);
    --radius-md:    var(--cfe-ds-radius-md,          12px);
    --radius-full:  var(--cfe-ds-radius-full,        9999px);
    --font-display: var(--cfe-ds-font-display,       'Outfit', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    --font-sans:    var(--cfe-ds-font-body,          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

/* Hide the default WC variation <dl> — DOM stays for screen readers /
   downstream consumers, but visually replaced by our .cfe-line block
   which is server-side rendered as a sibling <tr class="cfe-line__row">.
   Using !important + a deeper selector because some BB/FK rules have
   higher specificity than a flat `.wfacp_cart_title_sec .variation`. */
.wfacp_mini_cart_items .wfacp_cart_title_sec .wfacp_mini_cart_item_title dl.variation,
.wfacp_mini_cart_items .wfacp_cart_title_sec dl.variation,
.wfacp_cart_title_sec dl.variation {
    display: none !important;
}

/* Title styling — matches design's display font + tighter line-height. */
.wfacp_cart_title_sec .wfacp_mini_cart_item_title {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--ink);
}

.wfacp_cart_title_sec .wfacp_mini_cart_item_title .product-quantity {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11px;
    color: var(--graphite);
    margin-left: 8px;
    vertical-align: 0.1em;
}

/* ----------------------------------------------------------------------
   Promoted row — a JS step (credit-bundle-cart-item-row.js) detaches
   .cfe-line from the title <td> and re-inserts as a new <tr> sibling with
   <td colspan="N">. That gives the meta block the full row width.
   ---------------------------------------------------------------------- */
.wfacp_mini_cart_items tr.cfe-line__row > td {
    padding: 0 16px 14px;
    border: 0;
    background: transparent;
}

/* ----------------------------------------------------------------------
   Our design block — emitted by WC_CF_Credit_Bundle_Cart_Item_Renderer.
   Originally rendered inside .wfacp_cart_title_sec, then promoted to its
   own row by JS (above). CSS works in either parent context.
   ---------------------------------------------------------------------- */
.cfe-line {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 20px;
    font-family: var(--font-sans);
}

/* Partner row — graphite, with a small graduation-cap icon. */
.cfe-line__partner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--graphite);
}

.cfe-line__partner-icon {
    width: 12px;
    height: 12px;
    flex: none;
}

/* Chip row — single row, no wrap. Uses min-width:0 + text overflow on
   the value span so a long partner name truncates with ellipsis instead
   of forcing the row to wrap. */
.cfe-line__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}

.cfe-line__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--fog);
    border: 1px solid var(--mist);
    border-radius: var(--radius-full);
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink);
}

.cfe-line__chip-k {
    color: var(--graphite);
    font-weight: 400;
}

.cfe-line__chip-v {
    color: var(--ink);
    font-weight: 500;
}

/* Icon variant — uses BB icon-font (`<i class="bb-icon-l bb-icon-...">`)
   to match the rest of the site's iconography (avoid bespoke SVGs per
   feedback_no_placeholder_plugin_classes). Sized to chip-height. */
.cfe-line__chip--icon i.bb-icon-l,
.cfe-line__chip--icon i.bb-icon-rl,
.cfe-line__chip--icon i.bb-icon-rf,
.cfe-line__chip--icon i.bb-icon-f {
    font-size: 14px;
    line-height: 1;
    color: var(--graphite);
    flex: none;
}

/* Allow long values inside a chip (partner name) to truncate gracefully
   instead of forcing a row wrap. */
.cfe-line__chip--icon {
    min-width: 0;
}

.cfe-line__chip--icon .cfe-line__chip-v {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bundle rate callout — the headline reassurance. */
.cfe-line__math {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mint-bg);
    border: 1px solid var(--mint-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.35;
    color: var(--mint-text);
}

.cfe-line__math svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.cfe-line__math strong {
    font-weight: 600;
    color: var(--mint-text);
}

/* Standard-rate overflow — same component, ember palette to signal the
   boundary between bundle-covered and standard-rate credits. */
.cfe-line__math--standard {
    background: var(--ember-bg);
    border-color: var(--ember-border);
    color: var(--ember-text);
}

.cfe-line__math--standard strong {
    color: var(--ember-text);
}


/* Per-item shortfall note — ember-tinted */
.ck-cart__short {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--cfe-ds-color-ember-bg, #FEF3E7);
    border: 1px solid var(--cfe-ds-color-ember-border, #F8871F);
    border-radius: 8px;
    color: var(--cfe-ds-color-ink, #1B2A3B);
    font-size: 12px;
    line-height: 1.4;
}
.ck-cart__short svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--cfe-ds-color-ember-text, #F8871F);
    margin-top: 1px;
}


/* Pay-as-you-enroll info callout — sky-tinted forecast on bundle-row */
.ck-cart__pay-later {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--cfe-ds-tint-sky, #EFF6FF);
    border: 1px solid var(--cfe-ds-color-sky-text, #3E8AB8);
    border-radius: 8px;
    color: var(--cfe-ds-color-ink, #1B2A3B);
    font-size: 12px;
    line-height: 1.4;
}
.ck-cart__pay-later svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--cfe-ds-color-sky-text, #3E8AB8);
    margin-top: 1px;
}