/*
 * ARR — Cashfree checkout review dialog, and the corporate trust strip that sits
 * below the product page it is opened from.
 *
 * WAS: "Dialog styles ONLY … loading it changes no rendered pixel until a customer
 * opens a review." That is no longer true and the reason is deliberate. The five
 * sellable product pages now carry a static .arr-cfc-pagetrust block — the legal
 * entity, the CIN, a phone number, a WhatsApp route, the tax position — and those
 * facts are true whether or not the payment lane is switched on, so they are
 * rendered unconditionally rather than gated on readiness. Nothing here styles an
 * element this feature did not introduce: every selector is still .arr-cfc-, which
 * test/arr-cashfree-checkout.test.mjs enforces, so this stylesheet still cannot
 * restyle one pixel of the product template.
 *
 * It mirrors .arr-product-auth-dialog (public/arr-product-auth.css) so the review
 * and the WhatsApp sign-in feel like one surface. It does NOT use var(--arr-gold):
 * arr-product-template.css reserves gold for .arrp-primary-action and there is
 * exactly one primary action per product page.
 *
 * Every state is driven by a class or the hidden attribute — never a style
 * attribute, which CSP style-src-attr 'none' makes inert.
 */

.arr-cfc-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: min(760px, calc(100dvh - 24px));
  padding: 0;
  border: 1px solid var(--arr-line, #eadfe6);
  border-radius: 18px;
  background: #fff;
  color: var(--arr-ink, #19161b);
  font: 400 1rem/1.5 var(--arr-font, system-ui, sans-serif);
  box-shadow: 0 26px 80px rgba(58, 1, 64, .22);
  overflow: auto;
  overscroll-behavior: contain;
}

.arr-cfc-dialog::backdrop { background: rgba(30, 10, 32, .54); backdrop-filter: blur(3px); }

/* The dialog toggles panels with el.hidden; a display rule must never beat it. */
.arr-cfc-dialog [hidden] { display: none !important; }

.arr-cfc-dialog * { box-sizing: border-box; }

.arr-cfc-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--arr-line, #eadfe6);
  background: rgba(255, 255, 255, .96);
}

.arr-cfc-head h2 {
  margin: 0;
  font: 780 1.12rem/1.2 var(--arr-display, var(--arr-font, system-ui, sans-serif));
  color: var(--arr-plum-deep, #3a0140);
}

.arr-cfc-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f5edf5;
  color: var(--arr-plum, #6b016e);
  font: 500 1.65rem/1 var(--arr-font, system-ui, sans-serif);
  cursor: pointer;
}

.arr-cfc-close[disabled] { opacity: .45; cursor: default; }

.arr-cfc-body {
  padding: 18px 18px max(20px, env(safe-area-inset-bottom));
}

.arr-cfc-review, .arr-cfc-message { display: block; }

.arr-cfc-package {
  margin: 0 0 14px;
  color: var(--arr-plum-deep, #3a0140);
  font: 780 1.02rem/1.3 var(--arr-display, var(--arr-font, system-ui, sans-serif));
  overflow-wrap: anywhere;
}

/* ---- figures: every rupee here came from the server's quote ---- */

.arr-cfc-figures {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--arr-line, #eadfe6);
  border-radius: 14px;
  background: #fbf7fb;
}

.arr-cfc-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 7px 0;
}

.arr-cfc-figure + .arr-cfc-figure { border-top: 1px solid rgba(107, 1, 110, .12); }

.arr-cfc-figure dt {
  flex: 1 1 58%;
  min-width: 0;
  color: var(--arr-muted, #6b5f70);
  font-size: .84rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.arr-cfc-figure dd {
  flex: 0 0 auto;
  margin: 0;
  color: var(--arr-plum-deep, #3a0140);
  font-size: 1.02rem;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.arr-cfc-figure:nth-child(2) dd { font-size: 1.24rem; }

/* The sentence that names the sum leaving the account. It is the loudest piece of
   copy in the review on purpose: a customer must not be able to reach the tick-box
   without having passed the amount. Its text is server-derived; see renderQuote. */
.arr-cfc-payable {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(107, 1, 110, .24);
  border-radius: 12px;
  background: #f6ecf6;
  color: var(--arr-plum-deep, #3a0140);
  font: 800 1.02rem/1.35 var(--arr-font, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.arr-cfc-balance-note {
  margin: 0 0 18px;
  color: var(--arr-muted, #6b5f70);
  font-size: .82rem;
}

/* ---- fields ---- */

.arr-cfc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.arr-cfc-field label {
  color: var(--arr-ink, #19161b);
  font-size: .78rem;
  font-weight: 800;
}

.arr-cfc-field input {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--arr-line, #eadfe6);
  border-radius: 12px;
  background: #fff;
  color: var(--arr-ink, #19161b);
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font: 400 1rem/1.3 var(--arr-font, system-ui, sans-serif);
}

.arr-cfc-field input[disabled] { background: #f6f2f6; color: var(--arr-muted, #6b5f70); }

.arr-cfc-hint { margin: 2px 0 0; color: var(--arr-muted, #6b5f70); font-size: .76rem; }

/* ---- terms acceptance ---- */

.arr-cfc-terms {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 6px;
  margin: 18px 0 4px;
  padding: 14px 14px 14px 10px;
  border: 1px solid var(--arr-line, #eadfe6);
  border-radius: 14px;
  background: #fff;
}

/* The acceptance box IS a 44px target, like every other control in this dialog.
   It used to be 26x26 with a comment claiming the padded grid cell carried the
   44px — it does not, and cannot: verified by execution 2026-09-15, a tap 5px
   left of a 26px box lands on .arr-cfc-terms and toggles nothing, and padding
   on a native checkbox is inert (padding:9px on a 26px box still hit-tests
   26x26 in Chromium). The cell is not a control, so the control has to be the
   size. The label beside it stays a target as well; this adds a second one,
   removes none, and changes nothing about what acceptance MEANS — the box is
   still unchecked on open, still unchecked again on every re-quote, and still
   the only thing that enables the submit. */
.arr-cfc-terms input {
  width: 44px;
  height: 44px;
  margin: 0;
  accent-color: var(--arr-plum, #6b016e);
}

.arr-cfc-terms label {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--arr-ink, #19161b);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}

.arr-cfc-terms-link, .arr-cfc-cancel-link {
  grid-column: 2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--arr-plum, #6b016e);
  font-size: .8rem;
  font-weight: 780;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* The cancellation deep link is quieter than the acceptance link above it, but it
   is a 44px target like everything else here and it is never hidden. */
.arr-cfc-cancel-link {
  color: var(--arr-muted, #6b5f70);
  font-weight: 700;
}

/* ---- status and actions ---- */

.arr-cfc-status:empty { display: none; }

.arr-cfc-status {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(155, 34, 38, .32);
  border-radius: 12px;
  background: #fdf5f5;
  color: #7c1f22;
  font-size: .84rem;
  font-weight: 700;
}

.arr-cfc-submit, .arr-cfc-message-close {
  width: 100%;
  min-height: 50px;
  margin-top: 18px;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--arr-plum, #6b016e);
  color: #fff;
  font: 800 1rem/1.15 var(--arr-font, system-ui, sans-serif);
  cursor: pointer;
}

.arr-cfc-submit[disabled] { background: #d8cbd9; color: #6b5f70; cursor: not-allowed; }

.arr-cfc-message-close { background: var(--arr-plum-deep, #3a0140); }

.arr-cfc-message-text {
  margin: 0;
  color: var(--arr-ink, #19161b);
  font-size: .95rem;
}

/* ---- who is being paid: in-dialog trust block ----

   A SIBLING of both panels, so it is on screen in the review state and in every
   terminal state. COPY.ourFault asks the customer to contact ARR; this is what
   makes that instruction actionable. */

.arr-cfc-trust {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--arr-line, #eadfe6);
  color: var(--arr-muted, #6b5f70);
  font-size: .76rem;
  line-height: 1.5;
}

.arr-cfc-trust-line { margin: 0 0 7px; }

.arr-cfc-trust-legal {
  margin: 0 0 7px;
  color: var(--arr-ink, #19161b);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.arr-cfc-trust-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
}

.arr-cfc-trust-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--arr-plum, #6b016e);
  font-weight: 780;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* ---- the page-level corporate strip ----

   Static markup in the five sellable product shells, placed AFTER #arrProductRoot
   because arr-product-template.js calls root.replaceChildren() on every mount and
   would delete anything inside it. It reads as the legal strip under the site
   footer, which is where a private limited company's identity belongs. */

.arr-cfc-pagetrust {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 22px 0 max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--arr-line, #eadfe6);
  background: var(--arr-cream, #fffdf8);
  color: var(--arr-muted, #665b68);
  font: 400 .82rem/1.55 var(--arr-font, system-ui, sans-serif);
}

.arr-cfc-pagetrust-inner {
  width: min(1160px, calc(100% - 36px));
  margin-inline: auto;
  display: grid;
  gap: 8px;
}

.arr-cfc-pagetrust-lead {
  margin: 0;
  color: var(--arr-ink, #19161b);
  font-weight: 700;
}

.arr-cfc-pagetrust-line { margin: 0; }

.arr-cfc-pagetrust-legal {
  margin: 0;
  color: var(--arr-ink, #19161b);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.arr-cfc-pagetrust-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 0;
}

.arr-cfc-pagetrust a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--arr-plum, #6b016e);
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.arr-cfc-pagetrust a:hover { text-decoration: underline; }

/* ---- focus ---- */

.arr-cfc-dialog :is(button, input, a):focus-visible,
.arr-cfc-pagetrust a:focus-visible {
  outline: 3px solid var(--arr-plum, #6b016e);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---- breakpoints. The estate's three: 860 / 520 / 350. ---- */

@media (max-width: 860px) {
  .arr-cfc-submit, .arr-cfc-message-close { min-height: 54px; }
}

@media (max-width: 520px) {
  .arr-cfc-dialog { width: min(560px, calc(100% - 16px)); border-radius: 16px; }
  .arr-cfc-head, .arr-cfc-body { padding-inline: 14px; }
  .arr-cfc-figures { padding-inline: 13px; }
  .arr-cfc-figure { flex-direction: column; align-items: flex-start; }
  .arr-cfc-figure dt { flex-basis: auto; }
  /* Long links stack rather than push a horizontal scrollbar onto a phone. */
  .arr-cfc-trust-contact, .arr-cfc-pagetrust-contact { flex-direction: column; gap: 0; }
  .arr-cfc-pagetrust-inner { width: min(1160px, calc(100% - 24px)); }
}

@media (max-width: 350px) {
  .arr-cfc-dialog { width: calc(100% - 12px); }
  .arr-cfc-head, .arr-cfc-body { padding-inline: 11px; }
  .arr-cfc-payable { padding-inline: 11px; font-size: .96rem; }
  /* The column stays 44px at every width: a narrower phone is not a reason for
     a smaller acceptance target. The gap and the padding give the label back
     the room instead. */
  .arr-cfc-terms { column-gap: 8px; padding-inline: 8px 10px; }
  .arr-cfc-package { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .arr-cfc-dialog::backdrop { backdrop-filter: none; }
}

/* ---- OPEN, NOT FIXED: the page behind the review scrolls on a phone ----

   overscroll-behavior:contain above only stops scroll CHAINING out of the
   dialog's own scroller. It does nothing about a drag that starts on the
   backdrop, which is most of a 320px screen. Measured 2026-09-15 on the real
   product page at 390px: with the review open, a wheel over the backdrop moved
   the trip page from scrollY 3122 to 3299 behind it.

   The estate already answers this for its other two product-page dialogs —
   arr-type-performance.css:70 locks html/body at <=640px behind #enquiryDialog
   and .auth-dialog — and this dialog is simply not in that selector.

   The same answer cannot be written HERE: it needs an html/body selector, and
   test/arr-cashfree-checkout.test.mjs:1185 requires every selector in this file
   to be namespaced .arr-cfc-, so that loading this stylesheet on a closed-lane
   product page can restyle nothing else. That containment rule is worth more
   than this fix, and weakening it is not a change to make quietly. The two ways
   out are both someone else's call: add .arr-cfc-dialog to the estate's
   existing rule in arr-type-performance.css (a shared file), or lock the page
   from the module with a namespaced class. Left as found, and reported. */