/* ---------------------------------------------------------------------------
 * Price gate — the stand-in shown where a price would be.
 *
 * One rule set for every surface (catalogue card, service dialog, package
 * card). The button is rendered *inside* the element that held the money, so
 * that surface keeps deciding where the figure sits — and keeps its divider,
 * spacing and hover colours — while this file only decides what the control
 * looks like: quieter than the price it replaces, but still legibly pressable.
 *
 * Markup comes from PriceGate.lockedHtml (js/price-gate.js).
 * ------------------------------------------------------------------------- */

.price-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--default-font, sans-serif);
  /* Set below the figure it stands in for: this is a prompt, not a number, and
     it reads as one line of small caps rather than a price. */
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-align: start;
  /* Inherited so each surface's own price class keeps setting the colour, and
     the card's hover state (which flips its foot to white) still reaches it. */
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.price-lock:hover,
.price-lock:focus-visible {
  opacity: 1;
}

.price-lock:focus-visible {
  outline: 2px solid var(--accent-color, currentColor);
  outline-offset: 3px;
  border-radius: 4px;
}

.price-lock__icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The label can run to two lines in Arabic at card width; wrapping it is
   better than clipping a sentence the reader is meant to act on. */
.price-lock__text {
  min-width: 0;
}

/* --- Per-surface adjustments ---------------------------------------------- */

/* The wrappers set tabular figures and (in the catalogue card's muted state)
   small caps for the money they normally hold. Neither belongs on a sentence,
   and `text-transform: uppercase` on Arabic copy is simply noise. */
.svc-card__price .price-lock,
.svc-modal__price .price-lock,
.pk-price .price-lock {
  font-variant-numeric: normal;
  text-transform: none;
  letter-spacing: 0.03em;
}

/* The dialog has more room than a card, so the prompt is set a step larger
   there — it is the only line between the title and the description. */
.svc-modal__price .price-lock {
  font-size: 13px;
}

/* Package card: the price block is a column with the figure on top, so the
   stand-in takes the figure's row and the "valid for N days" meta line stays
   beneath it. `.pk-price-figure` is the display face for numerals only. */
.pk-price-figure .price-lock {
  font-family: var(--default-font, sans-serif);
  color: var(--pk-ink, inherit);
}