/* ===========================================================================
   Sidebar promo boxes — ported from the ceshive prototype (.buybox-upsell /
   .buybox-fbt). Shared by every product page (course / bundle / download /
   webinar / micro tactic). Distinctive dashed callouts with a corner tag: a
   warm accent for the upsell upgrade, a cool accent for the "bought together"
   cross-sell. Self-contained and box-scoped (no page-wrapper dependency);
   accents are custom properties so a theme can retint them. References the
   theme's --c-* / --r-* / --fs-* tokens with literal fallbacks.
   =========================================================================== */

.cp-upsell,
.cp-fbt {
  --promo-up: #e85d04;        /* upsell accent */
  --promo-up-tint: #fff4ed;   /* upsell price-box fill */
  --promo-up-pill: #ffe8d6;   /* upsell badge fill */
  --promo-fbt: #2563eb;       /* cross-sell accent */
  --promo-fbt-tint: #eff6ff;  /* cross-sell box fill */
}

/* ----- Upsell box (sidebar upgrade offer) ----- */
.cp-upsell {
  position: relative; padding: 14px 14px 16px;
  border: 2px dashed var(--promo-up); border-radius: var(--r-3, 10px);
}
/* When it lives inside the buy card (course / bundle / download / webinar) it insets from the
   card edges and clears the details above it, matching the prototype's in-card upsell. */
.cp-buy-card .cp-upsell { margin: 6px 16px 16px; }
/* Corner tag. Keeps the prototype's warm upsell accent as its fill, but takes the shared
   --badge-* type contract (Themes/ceshive/scss/_tokens.scss) so it sets no font of its own. */
.cp-upsell__tag {
  position: absolute; top: -10px; left: 12px; background: var(--promo-up); color: #fff;
  font-family: var(--badge-font, "Contax", sans-serif);
  font-size: var(--badge-size, 10px); font-weight: var(--badge-weight, 700);
  letter-spacing: var(--badge-tracking, .12em); text-transform: uppercase;
  line-height: var(--badge-line-height, 1);
  padding: var(--badge-pad-y, 4px) var(--badge-pad-x, 8px); border-radius: var(--badge-radius, 4px);
}
.cp-upsell__headline { margin: 8px 0 6px; font-size: var(--fs-15, 15px); font-weight: 800; color: var(--c-text, #1c1d1a); }
.cp-upsell__desc { margin: 0 0 12px; font-size: 13px; color: var(--c-muted, #666); line-height: 1.45; }
.cp-upsell__desc strong { color: var(--c-text, #1c1d1a); }
.cp-upsell__pricebox {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--promo-up-tint); border-radius: var(--r-2, 8px); padding: 10px 12px; margin-bottom: 12px;
}
.cp-upsell__price { font-size: 22px; font-weight: 800; color: var(--promo-up); line-height: 1.1; }
.cp-upsell__note { font-size: 12px; color: var(--c-muted, #666); margin-top: 2px; }
.cp-upsell__strike { text-decoration: line-through; }
.cp-upsell__badge {
  flex: none; color: var(--promo-up); background: var(--promo-up-pill);
  font-family: var(--badge-font, "Contax", sans-serif);
  font-size: var(--badge-size, 10px); font-weight: var(--badge-weight, 700);
  letter-spacing: var(--badge-tracking, .12em); text-transform: uppercase;
  line-height: var(--badge-line-height, 1);
  padding: var(--badge-pad-y, 4px) var(--badge-pad-x, 8px); border-radius: var(--badge-radius, 4px);
  white-space: nowrap;
}
.cp-upsell__cta {
  width: 100%; border: 0; border-radius: var(--r-2, 8px); padding: 12px;
  font-size: var(--fs-15, 15px); font-weight: 700; cursor: pointer;
  background: var(--promo-up); color: #fff; transition: filter .15s;
}
.cp-upsell__cta:hover { filter: brightness(.95); }

/* ----- Cross-sell "other students purchased together" ----- */
.cp-fbt {
  position: relative; padding: 18px 14px 14px;
  border: 2px dashed var(--promo-fbt); border-radius: var(--r-3, 10px); background: var(--promo-fbt-tint);
}
.cp-fbt__tag {
  position: absolute; top: -10px; left: 12px; background: var(--promo-fbt); color: #fff;
  font-family: var(--badge-font, "Contax", sans-serif);
  font-size: var(--badge-size, 10px); font-weight: var(--badge-weight, 700);
  letter-spacing: var(--badge-tracking, .12em); text-transform: uppercase;
  line-height: var(--badge-line-height, 1);
  padding: var(--badge-pad-y, 4px) var(--badge-pad-x, 8px); border-radius: var(--badge-radius, 4px);
  white-space: nowrap;
}
.cp-fbt__title { margin: 6px 0 12px; font-size: var(--fs-15, 15px); font-weight: 800; color: var(--c-text, #1c1d1a); }
.cp-fbt__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-fbt__item {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  background: var(--c-surface, #fff); border: 1px solid var(--c-line, #e5e5e5);
  border-radius: var(--r-2, 8px); padding: 10px 10px 10px 12px;
}
.cp-fbt__icon {
  width: 32px; height: 32px; border-radius: var(--r-2, 8px); background: var(--promo-fbt-tint);
  display: inline-flex; align-items: center; justify-content: center; color: var(--promo-fbt); font-size: 16px; flex: none;
}
.cp-fbt__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-fbt__name {
  font-size: 13px; font-weight: 700; color: var(--c-text, #1c1d1a); line-height: 1.25; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-fbt__name:hover { color: var(--promo-fbt); }
.cp-fbt__kind { font-size: 12px; color: var(--c-muted, #666); }
.cp-fbt__price { font-size: 14px; font-weight: 800; color: var(--c-primary, #b61c1b); white-space: nowrap; }
.cp-fbt__add {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--c-primary, #b61c1b); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 16px;
  transition: filter .15s;
}
.cp-fbt__add:hover { filter: brightness(.95); }