/* Checkout (#/checkout, js/checkout.js): Settings' panels and type (css/da-settings.css, .das + ds-*), two columns:
   their brand on the left, the order on the right; stacked under 900px. Tokens: css/rs-shell.css :root. */
:root .das.co-page { max-width: 1080px; }
:root .das .co-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--rs-gap); align-items: start; }
@media (max-width: 900px) { :root .das .co-grid { grid-template-columns: minmax(0, 1fr); } }

/* left: a title card drawn in their colours, then the facts */
:root .das .co-frame { position: relative; aspect-ratio: 16 / 9; margin-top: var(--rs-s12); padding: 6%; border-radius: var(--rs-r-inner); display: flex; flex-direction: column; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .das .co-frame--sk { background: var(--rs-inset); gap: 8px; }
:root .das .co-frame-top { display: flex; align-items: center; gap: 10px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); min-width: 0; }
:root .das .co-frame-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .das .co-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--dk-b-ffffffa92, rgba(255,255,255,.92)); padding: 4px; flex: none; }
:root .das .co-mono { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-weight: 600; font-size: 18px; flex: none; }
:root .das .co-frame-title { margin-top: auto; font-size: clamp(20px, 4.2vw, 34px); line-height: 1.1; font-weight: 600; letter-spacing: -.015em; }
:root .das .co-frame-bar { display: block; width: 34%; height: 6px; border-radius: 3px; margin-top: 12px; }
:root .das .co-facts { margin-top: var(--rs-s12); }
:root .das .co-facts > li { display: flex; align-items: center; justify-content: space-between; gap: var(--rs-s12); padding: 10px 0; border-top: 1px solid var(--rs-line); }
:root .das .co-facts > li:first-child { border-top: 0; }
:root .das .co-sws { display: inline-flex; gap: 6px; }
:root .das .co-sw { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(31,31,33,.14); }
:root .das .co-src { margin-top: 4px; }
:root .das .co-site { margin-top: var(--rs-s12); display: grid; gap: 4px; }
:root .das .co-site-row { display: flex; gap: 8px; margin-top: 8px; }
:root .das .co-site-row .ds-input { flex: 1; min-width: 0; }
:root .das .co-site .ds-err { margin-top: 4px; }

/* right: the order */
:root .das .co-title { margin-top: 4px; font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); line-height: 1.3; letter-spacing: -.01em; color: var(--rs-tx); }
:root .das .co-lead { margin-top: 6px; }
:root .das .co-order .co-incl { grid-template-columns: minmax(0, 1fr); }
:root .das .co-then { margin-top: var(--rs-s12); }
/* the plan's consent wording (billing rule 1), set apart so it is read before paying */
:root .das .co-consent { margin-top: var(--rs-s12); padding: 12px 14px; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .das .co-consent .ds-row-n { margin-top: 2px; }
:root .das .co-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: var(--rs-s16); }
:root .das .co-retry { margin-top: var(--rs-s12); }
@media (max-width: 520px) { :root .das .co-acts .ds-pill { width: 100%; } :root .das .co-site-row { flex-direction: column; } }

/* Create's Setup: the button a billing refusal gets, beside its reason (js/flow-stage.js #errTop) */
:root .fstage .err-top .err-act { margin-left: 8px; vertical-align: middle; }