/* Cart summary with USD and colones (crs/crs-crc-ref.js wraps each amount in .crs-pair):
   two fixed columns, right-aligned with tabular digits, so every row lines up. The view's currency
   leads at full size in the first column; the other follows small and gray in the second
   (crs-crc-ref puts them in that order). Billing stays USD. */
.orderpage-summary .crs-pair {
  display: inline-grid;
  /* Minimums keep rows aligned; a very large amount (e.g. $10,000.00 USD) widens its track instead
     of spilling into the label. */
  grid-template-columns: minmax(7.2em, max-content) minmax(5.6em, max-content);
  column-gap: 8px;
  justify-items: end;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: baseline;
}

html.crs-view-crc .orderpage-summary .crs-pair {
  grid-template-columns: minmax(6.2em, max-content) minmax(6.6em, max-content);
}

.orderpage-summary .crs-pair .crs-crc,
html.crs-view-crc .orderpage-summary .crs-pair .crs-crc {
  margin: 0;
}

/* "Total Recurring": the billing period ("Monthly", "Anual") on its own small line under the amounts. */
.orderpage-summary .flex-wrap:has(> span > .crs-pair) {
  flex-direction: column !important;
  align-items: flex-end !important;
}

.orderpage-summary .flex-wrap:has(> span > .crs-pair) > .pl-2 {
  align-self: flex-end;
  padding-left: 0 !important;
  font-size: 13px;
  color: #6b7280;
}

/* Under the big "Total Due Today": the colones equivalent on its own line. */
.orderpage-summary .crs-total-crc,
html.crs-view-crc .orderpage-summary .crs-total-crc {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
  color: #6b7280;
  -webkit-text-fill-color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* Narrow summary (side column on smaller screens): stack instead, lead on top and the other amount
   small under it, still right-aligned, so labels keep their room. */
/* The summary itself: its inner blocks get a fixed inline width from HostBill's script. When sticky
   it is position:fixed with left/right 0, so its width never depends on its content. */
.orderpage-summary {
  container-type: inline-size;
  container-name: crs-summary;
}

@container crs-summary (max-width: 340px) {
  .orderpage-summary .crs-pair,
  html.crs-view-crc .orderpage-summary .crs-pair {
    grid-template-columns: auto;
    row-gap: 0;
  }
}

/* Item names (product "Category - Product", domain name) head their lines: semi-bold so each group
   reads at a glance (the theme sets <strong> to normal weight). Rows with only an <hr> are left alone. */
.orderpage-summary .orderpage-summary-details td[colspan="2"]:not(:has(hr)),
.orderpage-summary .orderpage-summary-details td[colspan="2"]:not(:has(hr)) strong {
  font-weight: 600 !important;
  color: var(--crs-text-strong, #1d2939);
}

.orderpage-summary .orderpage-summary-details tr:not(:first-child) > td[colspan="2"]:not(:has(hr)) {
  padding-top: 4px;
}

/* Currency note, general rule (UAT 2026-11-01): the USD | ₡ switch first, the "billed in USD" note on
   one line below it — everywhere the note shows (services page, order pages, classic and UI 2).
   Specificity (0,2,2) beats the base .crs-crc-note rules (custom.css, html.crs-ui-2 .crs-crc-note) and
   stays below the context rules that lay it out differently (price controls, plans head, domain hero). */
html body .crs-crc-note.crs-crc-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 6px;
  align-items: start;
  justify-items: start;
}

html body .crs-crc-note.crs-crc-note > .crs-price-view {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}

html body .crs-crc-note.crs-crc-note > .material-icons {
  grid-row: 2;
  font-size: 16px;
  line-height: 1.4;
}

html body .crs-crc-note.crs-crc-note > span:not(.crs-price-view) {
  grid-row: 2;
}