/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — AI CREDIT COST PANEL

   The presentation of the one shared credit-cost component (`app/features/credit-cost.js`).
   Every selector is prefixed `.mdp-aic-`, so it reaches no class any other screen uses and
   no sheet above it defines a class this one touches. Removing this line from `index.html`
   removes the panel's styling and leaves the three figures as readable text — degraded,
   never broken (Rule 2, Rule 3).

   No literal colour anywhere: every value is a token, so the panel is legible in both
   themes and follows a future palette change without being edited.

   No `[dir='rtl']` rule and no physical margin, padding or border side. Every directional
   property here is logical, which is what makes the Arabic layout mirror correctly on its
   own — the panel reads right-to-left because the properties are described in reading
   order, not because a second set of rules undoes the first.
   ══════════════════════════════════════════════════════════════════════════════ */

/*
   The host the panel is repainted into. It carries no appearance of its own so a screen
   that has no quote yet — or never gets one — occupies no space and draws no empty frame.
*/
.mdp-aic-host:empty { display: none; }

.mdp-aic {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-brand-border);
  border-radius: var(--mdp-r-lg);
  /* The faint brand wash that marks a priced surface across the application, rather than a
     new decoration invented for this panel. */
  background: var(--mdp-brand-soft);
  min-inline-size: 0;
}

/* Beside a control in a tight header or a toolbar, where the panel is a companion to a
   button rather than a section of the page. */
.mdp-aic--dense {
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-3);
  border-radius: var(--mdp-r-md);
}

/*
   The short state. The frame changes, the figures do not move: a customer re-reading the
   panel after a balance drops should find the same three numbers in the same three places,
   with the reason added beneath.
*/
.mdp-aic--short {
  border-color: var(--mdp-warn);
  background: var(--mdp-warn-soft);
}

.mdp-aic-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
}

.mdp-aic-title svg { color: var(--mdp-brand); flex: none; }
.mdp-aic--short .mdp-aic-title svg { color: var(--mdp-warn); }

/*
   The three figures. `auto-fit` with a floor rather than three fixed columns: the panel sits
   in a page section on a desk screen and in a narrow drawer beside a button on others, and
   the same component has to be readable in both without a caller choosing a variant.
*/
.mdp-aic-figures,
.mdp-aic-short-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mdp-sp-2) var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-aic-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.mdp-aic-figure-label {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-faint);
}

.mdp-aic-figure-label svg { flex: none; opacity: 0.75; }

.mdp-aic-figure-value {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
  /* The figures are read as a set and compared to each other; tabular digits keep them
     aligned so "10 Credits" and "35 Credits" do not appear to be different widths of
     number. */
  font-variant-numeric: tabular-nums;
}

/* The price itself — the one figure a customer is deciding on. */
.mdp-aic-figure--cost .mdp-aic-figure-value { color: var(--mdp-brand); }
.mdp-aic-figure--short .mdp-aic-figure-value { color: var(--mdp-warn); }

/*
   The sentences beneath: that nothing will be deducted, that the charge happens once, or
   that the plan does not include the operation. Constrained in `ch` so a long Arabic
   sentence wraps at a readable measure instead of running the width of a desk screen.
*/
.mdp-aic-note {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-aic-note--warn { color: var(--mdp-warn); }

/* The refusal, inside the panel it explains. */
.mdp-aic-short {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  padding-block-start: var(--mdp-sp-3);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

.mdp-aic-short-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-warn);
}

.mdp-aic-short-title svg { flex: none; }

/*
   The remedy. Styled as a link rather than borrowing `.mdp-btn`, because it leaves the
   application for the billing surface and should not look like the control it is standing
   in for.
*/
.mdp-aic-action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--mdp-sp-1);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-brand);
  text-decoration: none;
  border-radius: var(--mdp-r-sm);
  transition: color var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-aic-action:hover { color: var(--mdp-brand-hover); text-decoration: underline; }
.mdp-aic-action svg { flex: none; }

/* A panel that appears next to a control should not slide in under a reduced-motion
   preference; there is no animation here to suppress, which is the intended state. */