/* ============================================================
   CFE Design System — Modal (canon component)
   Loaded site-wide by class-cfe-design-system.php alongside
   cfe-buttons.css / cfe-pills.css. Provides the .cfe-modal*
   shell that previously lived in the legacy cfe-modal-foundation
   (colors_and_type.css + cfe-global.css), now sourced from the
   --cfe-ds-* canon via the alias block below.
   ============================================================ */

/* ---- Token bridge: legacy shell tokens -> --cfe-ds-* canon ----
   Scoped to .cfe-modal-backdrop so the shell resolves canon values
   without reintroducing a global --cfe-* layer. Values are identical
   to the retired foundation (same brief palette/scale). */
.cfe-modal-backdrop{
  --cfe-fog: var(--cfe-ds-color-fog);
  --cfe-mist: var(--cfe-ds-color-mist);
  --cfe-ink: var(--cfe-ds-color-ink);
  --cfe-ink-deep: #0F1923;
  --cfe-graphite: var(--cfe-ds-color-graphite);
  --cfe-paper: #FFFFFF;
  --cfe-border-hover: #CBD0D8;
  --cfe-mint-bg: var(--cfe-ds-color-mint-bg);
  --cfe-mint-border: var(--cfe-ds-color-mint-border);
  --cfe-mint-text: var(--cfe-ds-color-mint-text);
  --cfe-sky-bg: var(--cfe-ds-color-sky-bg);
  --cfe-sky-border: var(--cfe-ds-color-sky-border);
  --cfe-sky-text: var(--cfe-ds-color-sky-text);
  --cfe-sky-decorative: var(--cfe-ds-color-sky-decorative);
  --cfe-ember-bg: var(--cfe-ds-color-ember-bg);
  --cfe-ember-border: var(--cfe-ds-color-ember-border);
  --cfe-ember-text: var(--cfe-ds-color-ember-text);
  --cfe-neutral-bg: #F1F3F7;
  --cfe-neutral-text: var(--cfe-ds-color-graphite);
  --cfe-alert-text: var(--cfe-ds-color-alert);
  --cfe-alert: var(--cfe-ds-color-alert);
  --cfe-tint-mint: var(--cfe-ds-tint-mint);
  --cfe-tint-sky: var(--cfe-ds-tint-sky);
  --cfe-tint-ember: var(--cfe-ds-tint-ember);
  --cfe-tint-slate: var(--cfe-ds-tint-slate);
  --cfe-tint-dust: var(--cfe-ds-tint-dust);
  --cfe-font-display: var(--cfe-ds-font-headline);
  --cfe-font-sans: var(--cfe-ds-font-body);
  --cfe-r-sm: var(--cfe-ds-radius-sm);
  --cfe-r-md: var(--cfe-ds-radius-md);
  --cfe-r-lg: var(--cfe-ds-radius-lg);
  --cfe-r-pill: var(--cfe-ds-radius-full);
  --cfe-r-full: var(--cfe-ds-radius-full);
  --cfe-2: var(--cfe-ds-space-2);
  --cfe-3: var(--cfe-ds-space-3);
  --cfe-4: var(--cfe-ds-space-4);
  --cfe-5: var(--cfe-ds-space-5);
  --cfe-6: var(--cfe-ds-space-6);
  --cfe-8: var(--cfe-ds-space-8);
  --cfe-12: var(--cfe-ds-space-12);
  --cfe-16: var(--cfe-ds-space-16);
  --cfe-20: var(--cfe-ds-space-20);
  --cfe-24: var(--cfe-ds-space-24);
  --cfe-ui: var(--cfe-ds-text-ui-size);
  --cfe-dur: var(--cfe-ds-duration-quick);
  --cfe-dur-smooth: var(--cfe-ds-duration-smooth);
  --cfe-ease: var(--cfe-ds-ease-standard);
  --cfe-shadow-focus: var(--cfe-ds-shadow-focus);
  --fs-card: var(--cfe-ds-text-card-size);   --lh-card: var(--cfe-ds-text-card-lh);
  --fs-meta: var(--cfe-ds-text-meta-size);   --lh-meta: var(--cfe-ds-text-meta-lh);
  --fs-micro: var(--cfe-ds-text-micro-size); --lh-micro: var(--cfe-ds-text-micro-lh);
}

/* ============================================================
   MODAL — shared shell (.cfe-modal*)
   Reusable backdrop + window chrome for any CFE modal.
   Page-specific modals layer their unique body on top.
   ============================================================ */
.cfe-modal-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(27,42,59,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--cfe-6);
  opacity:0; pointer-events:none;
  transition:opacity var(--cfe-dur-smooth) var(--cfe-ease);
}
.cfe-modal-backdrop[data-open="true"]{ opacity:1; pointer-events:auto; }

.cfe-modal{
  background:#fff;
  border-radius:var(--cfe-r-lg);
  width:100%; max-width:640px;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(27,42,59,0.18), 0 4px 12px rgba(27,42,59,0.06);
  overflow:hidden;
  transform:scale(0.97) translateY(8px);
  transition:transform var(--cfe-dur-smooth) var(--cfe-ease);
}
.cfe-modal-backdrop[data-open="true"] .cfe-modal{ transform:scale(1) translateY(0); }

.cfe-modal--sm{ max-width:440px; }
.cfe-modal--md{ max-width:560px; }
.cfe-modal--lg{ max-width:760px; }
.cfe-modal--xl{ max-width:920px; }

.cfe-modal__hd{
  position:relative;
  padding:var(--cfe-6) var(--cfe-6) var(--cfe-5);
  border-bottom:1px solid var(--cfe-mist);
}
.cfe-modal__eyebrow{
  display:block;
  font-size:var(--fs-micro, 12px); line-height:var(--lh-micro, 1.4); font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cfe-graphite);
  margin-bottom:6px;
}
.cfe-modal__eyebrow--ember{ color:var(--cfe-ember-text); }
.cfe-modal__eyebrow--ember::before{
  content:""; display:inline-block; width:6px; height:6px;
  border-radius:50%; background:var(--cfe-ember-border);
  margin-right:6px; vertical-align:1px;
}
.cfe-modal__eyebrow--sky{ color:var(--cfe-sky-text); }
.cfe-modal__eyebrow--sky::before{
  content:""; display:inline-block; width:6px; height:6px;
  border-radius:50%; background:var(--cfe-sky-border);
  margin-right:6px; vertical-align:1px;
}
.cfe-modal__title em{
  font-style:italic; font-weight:400;
  background:linear-gradient(transparent 65%, rgba(107,176,219,0.35) 65%);
  padding:0 2px;
}
.cfe-modal__title{
  font-family:var(--cfe-font-display); font-weight:500;
  font-size:var(--fs-card, 22px); line-height:var(--lh-card, 1.3); letter-spacing:-0.005em;
  margin:0; color:var(--cfe-ink);
}
.cfe-modal__sub{
  font-size:var(--fs-meta, 13px); line-height:var(--lh-meta, 1.5); color:var(--cfe-graphite); margin:6px 0 0;
}
.cfe-modal__hd-row{
  display:flex; align-items:flex-start; gap:var(--cfe-3);
}
.cfe-modal__hd-row > .cfe-modal__title{ flex:1 1 auto; }

.cfe-modal__close{
  flex:0 0 auto;
  width:32px; height:32px; border-radius:var(--cfe-r-pill);
  border:0; background:transparent; cursor:pointer;
  color:var(--cfe-graphite);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--cfe-dur) var(--cfe-ease), color var(--cfe-dur) var(--cfe-ease);
}
.cfe-modal__close:hover{ background:var(--cfe-mist); color:var(--cfe-ink); }
.cfe-modal__close svg{ width:18px; height:18px; }

.cfe-modal__body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:var(--cfe-5) var(--cfe-6);
}

.cfe-modal__ft{
  border-top:1px solid var(--cfe-mist);
  padding:var(--cfe-4) var(--cfe-6);
  display:flex; align-items:center; gap:var(--cfe-3);
  background:#fff;
}
.cfe-modal__ft-meta{
  flex:1 1 auto; min-width:0;
  font-size:var(--fs-meta, 13px); line-height:var(--lh-meta, 1.5); color:var(--cfe-graphite);
  display:inline-flex; align-items:center; gap:8px;
}
.cfe-modal__ft-meta svg{ width:14px; height:14px; flex:0 0 auto; }

/* Shared modal pieces — promoted from per-modal use */

/* Progress bar (Checklist pattern) */
.cfe-modal__progress{ margin-top:var(--cfe-4); }
.cfe-modal__progress-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; color:var(--cfe-graphite); margin-bottom:6px;
}
.cfe-modal__progress-row b{
  font-family:var(--cfe-font-display); font-weight:500;
  color:var(--cfe-ink); font-size:14px;
}
.cfe-modal__progress-bar{
  height:6px; border-radius:var(--cfe-r-pill);
  background:var(--cfe-mist); overflow:hidden; position:relative;
}
.cfe-modal__progress-fill{
  position:absolute; top:0; left:0; bottom:0;
  background:linear-gradient(90deg, #6EE7B7 0%, #34D399 100%);
  border-radius:var(--cfe-r-pill);
  transition:width var(--cfe-dur-smooth) var(--cfe-ease);
}

/* Column-header strip (Summary pattern) */
.cfe-modal__colhd{
  display:grid; grid-template-columns:1fr auto;
  gap:var(--cfe-4);
  padding-bottom:var(--cfe-3); margin-bottom:var(--cfe-2);
  border-bottom:1px solid var(--cfe-mist);
  font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cfe-graphite);
}
.cfe-modal__colhd > :last-child{ text-align:right; }

/* Form field (Form pattern) */
.cfe-field{ display:flex; flex-direction:column; gap:6px; }
.cfe-field + .cfe-field{ margin-top:var(--cfe-4); }
.cfe-field__label{
  font-size:13px; font-weight:500; color:var(--cfe-ink);
}
.cfe-field__hint{
  font-size:12px; color:var(--cfe-graphite); margin:0;
}
.cfe-field__err{
  font-size:12px; color:var(--cfe-alert-text, #B23B3B); margin:0;
}
.cfe-input, .cfe-select, .cfe-textarea{
  appearance:none; -webkit-appearance:none;
  font-family:inherit; font-size:14px; color:var(--cfe-ink);
  background:#fff; border:1px solid var(--cfe-mist);
  border-radius:var(--cfe-r-sm);
  padding:10px 12px; line-height:1.4;
  transition:border-color var(--cfe-dur) var(--cfe-ease),
             box-shadow var(--cfe-dur) var(--cfe-ease);
  width:100%;
}
.cfe-input:focus, .cfe-select:focus, .cfe-textarea:focus{
  outline:none; border-color:var(--cfe-ink);
  box-shadow:0 0 0 3px rgba(27,42,59,0.08);
}
.cfe-textarea{ min-height:96px; resize:vertical; font-family:inherit; }
.cfe-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}

@media (max-width:540px){
  .cfe-modal-backdrop{ padding:0; align-items:flex-end; }
  .cfe-modal{
    max-width:none; max-height:92vh;
    border-bottom-left-radius:0; border-bottom-right-radius:0;
  }
  .cfe-modal__hd{ padding:var(--cfe-5) var(--cfe-5) var(--cfe-4); }
  .cfe-modal__body{ padding:var(--cfe-4) var(--cfe-5); }
  .cfe-modal__ft{ padding:var(--cfe-3) var(--cfe-5); flex-direction:column-reverse; gap:10px; }
  .cfe-modal__ft-meta{ width:100%; justify-content:center; }
}


/* ============================================================
   MODAL BUTTON THEME-OVERRIDE SAFETY (added 2026-05-11)
   Modals run inside plugin/theme contexts that ship aggressive
   button rules (BuddyBoss <button> styles, legacy plugin
   .cfe-btn definitions). Without these guards, .cfe-btn renders
   at different sizes for <a> vs <button> inside a modal.
   Scoped under .cfe-modal-backdrop so we only beat theme styles
   inside an open modal — site-wide buttons are unaffected.
   ============================================================ */
.cfe-modal-backdrop .cfe-btn,
.cfe-modal-backdrop a.cfe-btn,
.cfe-modal-backdrop button.cfe-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--cfe-2, 8px) !important;
  padding: 12px 20px !important;
  border-radius: var(--cfe-r-sm, 8px) !important;
  font-family: var(--cfe-font-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: var(--cfe-ui, 15px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.cfe-modal-backdrop .cfe-btn--primary,
.cfe-modal-backdrop a.cfe-btn--primary,
.cfe-modal-backdrop button.cfe-btn--primary,
.cfe-modal-backdrop .cfe-btn--secondary,
.cfe-modal-backdrop a.cfe-btn--secondary,
.cfe-modal-backdrop button.cfe-btn--secondary,
.cfe-modal-backdrop .cfe-btn--ink,
.cfe-modal-backdrop .cfe-btn--outline,
.cfe-modal-backdrop .cfe-btn--ghost {
  background: var(--cfe-fog, #F4F5F7) !important;
  color: var(--cfe-ink, #1B2A3B) !important;
  border-color: var(--cfe-mist, #E8EAED) !important;
}
.cfe-modal-backdrop .cfe-btn:hover,
.cfe-modal-backdrop .cfe-btn--primary:hover,
.cfe-modal-backdrop .cfe-btn--secondary:hover {
  background: var(--cfe-mist, #E8EAED) !important;
  border-color: var(--cfe-graphite, #5B6573) !important;
  color: var(--cfe-ink, #1B2A3B) !important;
}
.cfe-modal-backdrop .cfe-btn--tertiary,
.cfe-modal-backdrop .cfe-btn--link {
  background: transparent !important;
  color: var(--cfe-sky-text, #3E8AB8) !important;
  border-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.cfe-modal-backdrop .cfe-btn--tertiary:hover,
.cfe-modal-backdrop .cfe-btn--link:hover {
  text-decoration: underline !important;
  background: transparent !important;
}

/* Icon sizing inside modal buttons — 14px square, doesn't shrink */
.cfe-modal-backdrop .cfe-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  display: inline-block !important;
}

/* Close-X button safety (already styled by .cfe-modal__close, but BB
   theme can paint a fill-circle on the bare <button>) */
.cfe-modal-backdrop .cfe-modal__close,
.cfe-modal-backdrop button.cfe-modal__close {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--cfe-r-pill, 999px) !important;
  color: var(--cfe-graphite, #5B6573) !important;
}
.cfe-modal-backdrop .cfe-modal__close:hover {
  background: var(--cfe-mist, #E8EAED) !important;
  color: var(--cfe-ink, #1B2A3B) !important;
}
.cfe-modal-backdrop .cfe-modal__close svg {
  width: 18px !important;
  height: 18px !important;
}


/* Label span inside .cfe-btn — lets JS swap the text (e.g. 'Preparing…')
   without touching adjacent SVG icons. Empty by default so it inherits
   all button typography; defined here for documentation + future hooks. */
.cfe-btn__label { display: inline; }


/* ============================================================
   MODAL LIST PRIMITIVE (added 2026-05-11)
   Used in: 03 Order (line items), 07 Outstanding Reqs (checklist),
   08 Increase Credits (radio options). Promotion per CFE-Design
   rule: pattern appears in 3+ modals.
   Zebra + hover scoped to desktop (>=721px); narrow viewports stay
   clean. Hover is intentionally subtle (Mist, not Sky) so it does
   not strongly suggest clickability on static info rows.
   ============================================================ */
.cfe-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.cfe-modal__list-item {
  padding: var(--cfe-4, 16px) var(--cfe-3, 12px);
  border-bottom: 1px solid var(--cfe-mist, #E8EAED);
  transition: background-color 150ms ease;
}
.cfe-modal__list-item:last-child {
  border-bottom: 0;
}
@media (min-width: 721px) {
  .cfe-modal__list-item:nth-child(even) {
    background-color: rgba(232, 234, 237, 0.35); /* Mist at 35% */
  }
  @media (hover: hover) and (pointer: fine) {
    .cfe-modal__list-item:hover {
      background-color: var(--cfe-mist, #E8EAED);
    }
  }
}


/* ============================================================
   BADGE — canonical modal pill (.cfe-badge)
   Ported from the retired cfe-modal-foundation .pill family so
   modals get badges without the legacy global .pill layer.
   Scoped to .cfe-modal-backdrop; resolves the bridge --cfe-* tokens.
   ============================================================ */
.cfe-modal-backdrop .cfe-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--cfe-r-full);
  font-family: var(--cfe-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
}
.cfe-modal-backdrop .cfe-badge--mint    { background: var(--cfe-mint-bg);    border-color: var(--cfe-mint-border);  color: var(--cfe-mint-text); }
.cfe-modal-backdrop .cfe-badge--sky     { background: var(--cfe-sky-bg);     border-color: var(--cfe-sky-border);   color: var(--cfe-sky-text); }
.cfe-modal-backdrop .cfe-badge--ember   { background: var(--cfe-ember-bg);   border-color: var(--cfe-ember-border); color: var(--cfe-ember-text); }
.cfe-modal-backdrop .cfe-badge--neutral { background: var(--cfe-neutral-bg); border-color: transparent;             color: var(--cfe-neutral-text); }

/* Leading <svg> icons render at 11px (gap inherited from base). */
.cfe-modal-backdrop .cfe-badge > svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  stroke-width: 2;
}