/* ============================================================
   CloudPedia Configure Product - shared card system (#253)
   Neutral, opt-in: an Order Form adopts it by adding the `cpcf`
   class to #order-standard_cart and wrapping each section as
   <section class="cpcf-card" aria-labelledby="ID"> with its heading
   <h2 class="cpcf-card-title" id="ID"> inside. Nothing here sets a
   width, font family or page colour; the Order Form owns those.

   Specificity trap: the Parent (cloudx_cart.css) styles
   `#order-standard_cart #frmConfigureProduct .product-info` and
   `.field-container` with TWO IDs (border: 0, faint shadow, padding,
   margin), so any Child rule with one ID silently loses. Every rule
   below that touches an element the Parent also targets carries
   #frmConfigureProduct too (two IDs plus classes); no escape hatches.

   Hairline #E4E8F2 is the approved Configure card border. It lives only
   as the scoped --cpcf-line custom property (palette-contract definitions
   are exempt from the literal scan, ADR-0011) and is consumed via var().
   ============================================================ */
#order-standard_cart.cpcf {
  --cpcf-line: #E4E8F2;
}

/* Section card. */
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card {
  background: var(--cp-surface);
  border: 1px solid var(--cpcf-line);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
  margin-bottom: 20px;
  min-width: 0;
  padding: 20px;
}

/* Card heading (the in-card h2). */
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card .cpcf-card-title {
  color: var(--cp-gray-900);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
}
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card .cpcf-card-title small {
  font-size: 13px;
  font-weight: 400;
}

/* No card inside a card: the Parent's own section boxes
   (.product-info, .field-container, #productConfigurableOptions) render
   flat inside a cpcf-card. They keep their class so Parent feature-list,
   select and label rules still apply. Two IDs + three classes beats the
   Parent's two IDs + one class. */
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card .product-info,
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card .field-container {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
/* The Parent's #productConfigurableOptions box rule is two IDs and no
   class; three IDs here. */
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card #productConfigurableOptions {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* Free text inside a card (usage-metrics explanation and list). */
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card > p {
  margin: 0 0 12px;
}
#order-standard_cart.cpcf #frmConfigureProduct .cpcf-card > ul {
  margin: 0;
  padding-left: 18px;
}

/* Addon tiles: a section is a card, a choice is a tile - thin border,
   no shadow. The Parent's `.addon-products .card` rule is two IDs and
   two classes, so this carries #frmConfigureProduct as well. */
#order-standard_cart.cpcf #frmConfigureProduct .addon-products {
  margin: 0;
}
#order-standard_cart.cpcf #frmConfigureProduct .addon-products .panel-addon {
  border: 1px solid var(--cpcf-line);
  border-radius: 6px;
  box-shadow: none;
}