/* ============================================================================
   registry-commerce.css — THE BROWSE-AND-BUY PAGES ONLY
   domains.html · pricing.html · cart.html · book-email.html
   Owner: RD-COMMERCE.

   SCOPE RULE (INTEGRATION-CONTRACT §2): the shared vocabulary lives in
   registry.css and is consumed here BY CLASS NAME. This file adds only the
   page-specific layout glue those four pages need:

     - the bilingual kicker row (same shape the landing page uses),
     - the results list reset and the cells a server-authored reason sits in,
     - the two-column cart (list + sticky acquisition panel),
     - the tariff reason placement,
     - and the LEGACY CLASS NAMES book-email.js writes at runtime.

   That last group is the reason this file is longer than its siblings.
   book-email.js is NOT ours (it is the working concierge form, and its
   behaviour must not change), and it builds every ID row with innerHTML using
   the class names .id-row / .id-row-inputs / .id-user / .id-at / .id-domain /
   .id-remove, toggles .visible on .field-error, .invalid on the .field
   wrapper, .loading on the submit button and .visible on .book-success. Those
   names are therefore a live interface, not dead markup: they are restyled
   here in the registry vocabulary rather than renamed, because renaming them
   would mean editing that script.

   Every rule is prefixed .rgx- or is one of those legacy names scoped under a
   page root, so nothing here can collide with .rg-* (RD-foundation) or with
   another page stylesheet.

   NO COLOURS, NO TYPE SCALE, NO RADII ARE INVENTED HERE. Every value below is
   either a shared --rg-* token or a pure geometry number. registry.css zeroes
   every border-radius at specificity 0, and nothing in this file opts back in.

   NOTE: no apostrophes in comments, matching registry.css. The comment-balance
   assertion in client-assets.test.ts reads strings and comments in one pass,
   but the convention costs nothing and removes a whole class of false alarm.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. DOCUMENT — in-page anchors under the sticky nav
   ------------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  /* Clear the sticky .rg-nav: 20px + 36px medallion + 20px + hairline. */
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   2. NAV — brand pin + the language control

   The brand is a link containing only canvases, so the shared
   `a:hover { color: ivory }` has nothing to colour. Pin it so a later change
   cannot tint the text twin mid-hover.
   ------------------------------------------------------------------------ */
.rgx-brand,
.rgx-brand:hover,
.rgx-brand:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* EN / عربي. An endonym pair: the label is the language it switches TO, in
   its own script, so it needs no dictionary entry in either mode. Styled as a
   nav link because that is what it is. */
.rgx-lang {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--rg-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-warm);
  white-space: nowrap;
  transition: color var(--rg-t-fast);
}
.rgx-lang:hover,
.rgx-lang:focus-visible { color: var(--rg-ivory); }
.rgx-lang[lang="ar"] {
  font-family: var(--rg-arabic);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   3. HERO — the bilingual kicker is TWO elements, not one.
      i18n renders through textContent (i18n.js:1899), so one element with
      nested spans would lose its children on every language switch.
   ------------------------------------------------------------------------ */
.rgx-kicker {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.rgx-kicker--start { justify-content: flex-start; }
.rgx-kicker__sep { color: var(--rg-gold-dim); }
/* The Arabic half of a kicker: Naskh, kicker size, no tracking (letter-spacing
   pulls Arabic joins apart). It matches the Latin half rather than the gold
   `.rg-ar` default, because the two halves are one sentence. */
.rgx-kicker__ar {
  font-family: var(--rg-arabic);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--rg-warm);
  direction: rtl;
  unicode-bidi: isolate;
}

/* Microcopy shimmer while the domain COUNT is still unknown. A guessed count
   is a lie the day a domain is added, so the clause is a skeleton, not a
   number (contract §5). */
.rgx-note-skeleton {
  display: inline-block;
  width: 300px;
  max-width: 80%;
  height: 9px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   4. RESULTS + ROW CELLS
   ------------------------------------------------------------------------ */
.rgx-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A server-authored reason or an unknown price re-seated into the cell a
   price would have occupied: hard against the end edge, no stacked margin. */
.rgx-hint-cell {
  margin-top: 0;
  text-align: end;
}
/* Inside a bento foot the hint must not stretch past the blurb. */
.rgx-hint-foot {
  flex: none;
  max-width: 55%;
}
/* With no server blurb the card renders no description element at all, so the
   space-between foot would park its single child at the start. Pin whatever
   occupies the end slot instead of propping the layout up with an empty span. */
.rgx-foot-end { margin-inline-start: auto; }

/* The act cell can hold two controls (claim + remove). */
.rgx-act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
/* Remove-from-shortlist. A real button, sized for touch, no icon font. */
.rgx-remove {
  background: transparent;
  border: 1px solid var(--rg-line-2);
  color: var(--rg-warm);
  cursor: pointer;
  font-family: var(--rg-sans);
  font-size: 14px;
  line-height: 1;
  padding: 9px 11px;
  min-width: 34px;
  transition: color var(--rg-t-fast), border-color var(--rg-t-fast);
}
.rgx-remove:hover,
.rgx-remove:focus-visible { color: var(--rg-danger); border-color: rgba(var(--rg-danger-rgb), 0.5); }

/* ---------------------------------------------------------------------------
   5. LOADING BLOCKS — geometry only; the shimmer is the shared .rg-skeleton
   ------------------------------------------------------------------------ */
.rgx-skeleton-card { min-height: 190px; }
.rgx-skeleton-card--flagship { min-height: 250px; }
.rgx-skeleton-end { margin-inline-start: auto; }
.rgx-skeleton-word { height: 34px; width: 62%; }

/* ---------------------------------------------------------------------------
   6. TARIFF — a domain we cannot sell shows its reason across the two money
      columns. .rg-tariff__row is `1fr 180px 180px 220px`.
   ------------------------------------------------------------------------ */
.rgx-tariff-reason {
  grid-column: 2 / 4;
  text-align: end;
}
.rgx-tariff-badge { margin-inline-start: 10px; }

/* ---------------------------------------------------------------------------
   7. CART — list + sticky acquisition panel
   ------------------------------------------------------------------------ */
.rgx-cart {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--rg-gutter);
  align-items: start;
  margin-top: 40px;
}
.rgx-cart > * { min-width: 0; }
.rgx-summary { position: sticky; top: 100px; }
/* One priced line per address. There is deliberately no SUM of these: the
   server computes a total per address and never for a basket, so adding them
   here would print a number nobody quoted (contract §4, honesty rule 1). */
.rgx-sumline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rg-line-row);
  font-size: 13px;
}
.rgx-sumline:last-child { border-bottom: none; }
.rgx-sumline__addr {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--rg-warm);
  font-weight: 300;
  direction: ltr;
  unicode-bidi: isolate;
}
.rgx-sumline__val { flex: none; }
.rgx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rg-warm);
}
.rgx-breadcrumb__sep { color: var(--rg-gold-dim); }
.rgx-trust {
  margin-top: 26px;
  display: grid;
  gap: 10px;
}
.rgx-trust__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--rg-warm);
  font-weight: 300;
}
.rgx-trust__mark { flex: none; color: var(--rg-gold); font-family: var(--rg-serif); }

/* The acquisition panel. Not an error box: a stated, designed condition of the
   product right now, with the route that does work. */
.rgx-panel {
  margin-top: 26px;
  border: 1px solid var(--rg-line-3);
  border-inline-start: 2px solid var(--rg-gold);
  background: var(--rg-wash-2);
  padding: 20px 22px;
}
.rgx-panel__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rg-gold);
}
.rgx-panel__body {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--rg-warm);
}
.rgx-panel__act { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   8. MODAL — the clear-the-cart confirmation. Rendered as a real dialog with
      a focus trap by the page script; this is only its box.
   ------------------------------------------------------------------------ */
.rgx-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--rg-gutter);
  background: rgba(5, 4, 3, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rgx-modal.is-open { display: flex; }
.rgx-modal__card {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--rg-line-3);
  background: var(--rg-surface-2);
  padding: 34px 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.rgx-modal__acts {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   9. PRICING — what an address includes, and the questions
   ------------------------------------------------------------------------ */
.rgx-includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rg-gap); }
.rgx-qa { display: grid; gap: 0; margin-top: 34px; }
.rgx-qa__item { border-top: 1px solid var(--rg-line-soft); }
.rgx-qa__item:last-child { border-bottom: 1px solid var(--rg-line-soft); }
.rgx-qa__q {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  text-align: start;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 22px 4px;
  font-family: var(--rg-serif);
  font-size: 18px;
  color: var(--rg-ivory);
  transition: color var(--rg-t-fast);
}
.rgx-qa__q:hover,
.rgx-qa__q:focus-visible { color: var(--rg-gold); }
.rgx-qa__mark { flex: none; font-family: var(--rg-serif); font-size: 20px; color: var(--rg-gold); line-height: 1; }
.rgx-qa__a {
  margin: 0;
  padding: 0 4px 24px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--rg-warm);
}

/* ---------------------------------------------------------------------------
   10. BOOK-EMAIL — the concierge form.

   Everything from here down is the legacy interface book-email.js writes at
   runtime, restyled. The NAMES are fixed by that script; the values are all
   shared tokens. Scoped under .rgx-book so a generic name like .field or
   .spinner cannot leak onto another page.
   ------------------------------------------------------------------------ */
.rgx-book { max-width: var(--rg-maxw); margin: 0 auto; padding: 0 var(--rg-gutter) 110px; }
.rgx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rg-gap); margin-top: 40px; }
.rgx-step { border-top: 1px solid rgba(var(--rg-gold-rgb), 0.35); padding-top: 24px; }
.rgx-step__num { font-family: var(--rg-serif); font-size: 15px; letter-spacing: 0.2em; color: var(--rg-gold); }
.rgx-step__title { margin-top: 14px; font-family: var(--rg-serif); font-size: var(--rg-h4); color: var(--rg-ivory); }
.rgx-step__body { margin: 8px 0 0; }

.rgx-book__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--rg-gutter);
  align-items: start;
  margin-top: 60px;
}
.rgx-book__grid > * { min-width: 0; }
.rgx-aside { position: sticky; top: 100px; display: grid; gap: var(--rg-gap); }
.rgx-form {
  border: 1px solid var(--rg-line-3);
  background: var(--rg-surface-2);
  padding: 42px;
}
.rgx-form__section { margin: 0; font-family: var(--rg-serif); font-size: var(--rg-h4); color: var(--rg-ivory); }
.rgx-form__section--next { margin-top: 44px; }
.rgx-form__hint { margin: 8px 0 26px; font-size: 13px; line-height: 1.7; font-weight: 300; color: var(--rg-warm); }
.rgx-rule { border: none; border-top: 1px solid var(--rg-line-soft); margin: 38px 0 0; }

/* --- the ID rows (built by book-email.js) --- */
.rgx-book .id-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}
.rgx-book .id-row-inputs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rg-line-2);
  background: var(--rg-well);
  transition: border-color var(--rg-t-fast);
  /* An address is LTR data: keep username@domain in that order even in RTL. */
  direction: ltr;
}
.rgx-book .id-row-inputs:focus-within { border-color: var(--rg-gold); }
.rgx-book .id-user {
  flex: 1;
  min-width: 0;
  width: 60px;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 16px;
  font-family: var(--rg-serif-ar);
  font-size: 18px;
  color: var(--rg-ivory);
}
.rgx-book .id-at {
  display: flex;
  align-items: center;
  padding: 0 2px;
  font-family: var(--rg-serif);
  font-size: 19px;
  color: var(--rg-gold);
}
.rgx-book .id-domain {
  border: none;
  outline: none;
  background: transparent;
  color: var(--rg-ivory);
  padding: 14px 12px;
  font-family: var(--rg-sans);
  font-size: 14px;
  cursor: pointer;
  max-width: 46%;
}
/* The native menu paints on the platform surface, not ours. */
.rgx-book .id-domain option { color: #0e0d0b; background: #f3eee3; }
.rgx-book .id-remove {
  flex: none;
  min-width: 44px;
  border: 1px solid var(--rg-line-2);
  background: transparent;
  color: var(--rg-warm);
  cursor: pointer;
  transition: color var(--rg-t-fast), border-color var(--rg-t-fast);
}
.rgx-book .id-remove:hover:not([disabled]),
.rgx-book .id-remove:focus-visible { color: var(--rg-danger); border-color: rgba(var(--rg-danger-rgb), 0.5); }
.rgx-book .id-remove[disabled] { color: var(--rg-dim); cursor: not-allowed; }
/* book-email.js writes `<span class="material-icons-round">close</span>` inside
   that button. This page carries no icon font, so the LIGATURE NAME would
   print as the word "close". Blank the text and draw the mark in CSS, which
   also keeps the control readable if the font ever fails to load elsewhere. */
.rgx-book .material-icons-round { font-size: 0; line-height: 1; }
.rgx-book .id-remove .material-icons-round::after {
  content: "\00d7";
  font-family: var(--rg-sans);
  font-size: 18px;
}

.rgx-addid {
  display: inline-block;
  margin-top: 4px;
  background: transparent;
  border: 1px dashed var(--rg-line-4);
  color: var(--rg-gold);
  cursor: pointer;
  font-family: var(--rg-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 22px;
  transition: color var(--rg-t-fast), border-color var(--rg-t-fast);
}
.rgx-addid:hover:not([disabled]),
.rgx-addid:focus-visible { color: var(--rg-ivory); border-color: var(--rg-gold); }
.rgx-addid[disabled] { color: var(--rg-dim); border-color: rgba(var(--rg-gold-rgb), 0.18); cursor: not-allowed; }

/* --- contact fields --- */
.rgx-book .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}
.rgx-book .field { display: block; min-width: 0; }
.rgx-book .field label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rg-warm);
  margin-bottom: 8px;
}
.rgx-book .req-star { color: var(--rg-gold); }
.rgx-book .opt-tag { color: var(--rg-gold-dim); }
.rgx-book .premium-input {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(var(--rg-gold-rgb), 0.25);
  padding: 12px 2px;
  font-size: 15px;
  color: var(--rg-ivory);
  outline: none;
  transition: border-color var(--rg-t-fast);
}
.rgx-book textarea.premium-input { line-height: 1.7; resize: vertical; }
.rgx-book .premium-input:hover { border-bottom-color: var(--rg-line-4); }
.rgx-book .premium-input:focus,
.rgx-book .premium-input:focus-visible { border-bottom-color: var(--rg-gold); }
.rgx-book .premium-input[readonly] { color: var(--rg-warm); border-bottom-color: rgba(var(--rg-gold-rgb), 0.12); }
/* book-email.js toggles `.invalid` on the wrapper and `.visible` on the error. */
.rgx-book .field.invalid .premium-input { border-bottom-color: var(--rg-danger); }
.rgx-book .field.invalid label { color: var(--rg-danger); }
.rgx-book .field-error,
.rgx-book .id-error {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rg-danger);
}
.rgx-book .field-error.visible,
.rgx-book .id-error.visible { display: block; }
.rgx-book .id-error { margin: -4px 0 12px; }
.rgx-book .same-mobile {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-warm);
  cursor: pointer;
}
.rgx-book .same-mobile input { width: 14px; height: 14px; accent-color: var(--rg-gold); }
/* Honeypot: out of sight for people, still in the form for bots. */
.rgx-book .hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rgx-book .form-error-banner {
  display: none;
  margin-bottom: 18px;
  padding: 16px 20px;
  border-inline-start: 2px solid var(--rg-danger);
  background: rgba(var(--rg-danger-rgb), 0.05);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rg-danger);
}
.rgx-book .form-error-banner.visible { display: block; }
/* book-email.js toggles `.loading`, not the shared `.is-loading`. */
.rgx-book .book-submit .spinner { display: none; }
.rgx-book .book-submit.loading { cursor: progress; }
.rgx-book .book-submit.loading .spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(14, 13, 11, 0.35);
  border-top-color: rgba(14, 13, 11, 0.9);
  animation: rgx-spin 0.8s linear infinite;
}
@keyframes rgx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rgx-book .book-submit.loading .spinner { animation-duration: 2.4s; }
}

/* --- success panel (revealed by book-email.js adding `.visible`) --- */
.rgx-book .book-success { display: none; }
.rgx-book .book-success.visible { display: block; }
.rgx-book .success-ids { margin-top: 16px; display: grid; gap: 8px; }
.rgx-book .success-id {
  border: 1px solid var(--rg-line-2);
  background: var(--rg-surface);
  padding: 14px 18px;
  font-family: var(--rg-serif-ar);
  font-size: 19px;
  color: var(--rg-ivory);
  overflow-wrap: anywhere;
  direction: ltr;
  unicode-bidi: isolate;
}
.rgx-trustmarks {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid var(--rg-line-2);
  background: var(--rg-surface);
}
.rgx-trustmarks img {
  height: 22px;
  width: auto;
  background: #f3eee3;
  padding: 5px 9px;
  box-sizing: content-box;
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVE — mirrors the two shared breakpoints (900 / 560)
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
  .rgx-tariff-reason { grid-column: 1 / -1; text-align: start; }
  .rgx-skeleton-card,
  .rgx-skeleton-card--flagship { min-height: 150px; }
  .rgx-cart,
  .rgx-book__grid { grid-template-columns: minmax(0, 1fr); }
  .rgx-summary,
  .rgx-aside { position: static; }
  .rgx-includes,
  .rgx-steps { grid-template-columns: repeat(2, 1fr); }
  .rgx-form { padding: 30px 26px; }
  .rgx-lang { padding: 14px 0; }
}

@media (max-width: 560px) {
  .rgx-kicker { gap: 8px; }
  .rgx-note-skeleton { width: 200px; }
  .rgx-includes,
  .rgx-steps { grid-template-columns: 1fr; }
  .rgx-book .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .rgx-form { padding: 24px 20px; }
  .rgx-modal__card { padding: 26px 22px; }
  .rgx-book .id-domain { max-width: 42%; }
}