/*
 * Styles for the interactive demo apps (demo-kit.js + demo-app-*.js).
 * Loaded after sites.css, which already defines the modal shell, panels,
 * buttons and KPI cards these views reuse.
 */

/* --------------------------------------------------------------------------
   Control scale
   --------------------------------------------------------------------------
   Two things to know here.

   1. The checkout flow mounts as a sibling of .demo-app-content (it has to
      cover the whole dialog), so the `.demo-app-content input` rules in
      sites.css never reached it — flow fields rendered as bare browser
      inputs. Everything below is scoped to both containers.
   2. Controls used to take the page's 16px body size while their labels sat
      at 11px. The default below is set through :where(), which carries no
      specificity, so any component that sizes its own buttons (chips at 10px,
      the close button at 20px) still wins. Text inputs are pinned harder,
      because several sit inside 11px filter labels they must not inherit.
   -------------------------------------------------------------------------- */

:is(.demo-app-content, .demo-flow-host) { font-size: 13px; }

:where(.demo-app-content, .demo-flow-host) :where(button, input, select, textarea) {
  font-family: inherit;
  font-size: 13px;
}

:is(.demo-app-content, .demo-flow-host)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid #d7dce5;
  border-radius: 9px;
  background-color: white;
  color: #101828;
  line-height: 1.35;
  transition: border-color .16s ease, box-shadow .16s ease;
}
:is(.demo-app-content, .demo-flow-host) textarea { min-height: 84px; padding-top: 10px; resize: vertical; }
:is(.demo-app-content, .demo-flow-host) :is(input, textarea)::placeholder { color: #a9b2c2; }
:is(.demo-app-content, .demo-flow-host) :is(input, select, textarea):hover:not(:disabled) { border-color: #bcc5d3; }
:is(.demo-app-content, .demo-flow-host) :is(input, select, textarea):focus { border-color: var(--accent); }
:is(.demo-app-content, .demo-flow-host) :is(input, select):disabled { background-color: #f6f8fb; color: #98a2b3; }

/* The flow lives outside .demo-app-content, so it needs its own copy of the
   focus ring sites.css defines for the workspace. */
.demo-flow-host :is(button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

/* Selects get a drawn chevron so they sit at the same height as text inputs
   instead of the shorter native control. */
:is(.demo-app-content, .demo-flow-host) select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
:is(.demo-app-content, .demo-flow-host) input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
:is(.demo-app-content, .demo-flow-host) input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; }
:is(.demo-app-content, .demo-flow-host) input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* Controls that must escape the boxed treatment above. */
:is(.demo-app-content, .demo-flow-host) input[type="range"] {
  width: 100%;
  min-height: 0;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}
:is(.demo-app-content, .demo-flow-host) :is(input[type="checkbox"], input[type="radio"]) {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Buttons that sit in a row beside a field stretch to the row height, which
   would leave the field taller than every other field in the app. */
.demo-promo > button,
.demo-recipient-form > button,
.demo-chat-form > button { min-height: 40px; padding-top: 0; padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Shell: tabs, boot states, generic bits
   -------------------------------------------------------------------------- */

.demo-shell { display: flex; flex-direction: column; min-height: 100%; }
.demo-tabs { display: flex; gap: 4px; padding: 10px 18px 0; border-bottom: 1px solid #e2e6ed; background: white; overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 11px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: #667085; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.demo-tabs button:hover { color: #101828; }
.demo-tabs button.is-active { border-bottom-color: var(--accent); color: var(--accent); }
.demo-tabs button span:not(:empty) { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: white; font-size: 10px; }
.demo-tabpanel { flex: 1; min-height: 0; }
.demo-pad { padding: 24px; }

.demo-boot { display: grid; place-items: center; gap: 12px; min-height: 320px; padding: 40px; color: #667085; text-align: center; }
.demo-boot h4 { margin: 0; color: #101828; font-size: 17px; }
.demo-boot p { margin: 0; font-size: 13px; }
.demo-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; color: #667085; font-size: 12px; }

.demo-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: currentColor; border-radius: 50%; animation: demo-spin .7s linear infinite; }
.demo-loading .demo-spinner, .demo-boot .demo-spinner { border-color: #d7dce5; border-top-color: var(--accent); }
@keyframes demo-spin { to { transform: rotate(360deg); } }

.demo-list { margin: 0; padding-left: 18px; color: #475467; font-size: 12px; line-height: 1.7; }
.demo-list b { color: #101828; }
.demo-inline-note { margin: 12px 0 0; padding: 11px 13px; border-radius: 9px; background: #f4f6fa; color: #667085; font-size: 11.5px; line-height: 1.6; }
.demo-inline-warn { margin: 12px 0 0; padding: 11px 13px; border-radius: 9px; background: #fff5e6; color: #a1620a; font-size: 11.5px; }
.demo-center { display: block; margin: 12px auto 0; text-align: center; }
.demo-tagline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.demo-tagline span { padding: 3px 7px; border-radius: 5px; background: #f1f3f8; color: #667085; font-size: 9px; font-weight: 700; }
.demo-remove { width: 26px; height: 26px; border: 1px solid #e4e7ec; border-radius: 7px; background: white; color: #98a2b3; font-size: 15px; line-height: 1; cursor: pointer; }
.demo-remove:hover { border-color: #f0a1a1; color: #d92d20; }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

/* start alignment matters: a field carrying a hint line is taller than its
   neighbour, and stretching would make one input taller than the other. */
.demo-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.demo-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.demo-field-label-row { color: #667085; font-size: 11px; font-weight: 700; }
.demo-field-label-row i { color: var(--accent); font-style: normal; }
.demo-field-hint { color: #98a2b3; font-size: 10.5px; }
.demo-field-error { display: none; color: #d92d20; font-size: 10.5px; font-weight: 600; }
.demo-field-error.is-visible { display: block; }
:is(.demo-app-content, .demo-flow-host) [data-field].has-error { border-color: #f04438; box-shadow: 0 0 0 3px rgba(240, 68, 56, .1); }

.demo-check { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid #e4e7ec; border-radius: 10px; background: white; color: #344054; font-size: 12px; cursor: pointer; }
.demo-check:hover { border-color: var(--accent); }
.demo-check input { margin-top: 1px; }
.demo-check span { display: grid; gap: 2px; }
.demo-check small { color: #98a2b3; font-size: 10px; }
.demo-check-inline { padding: 6px 8px; font-size: 11px; }
.demo-addon-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }

.demo-choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.demo-choice-row button { display: grid; gap: 4px; padding: 14px; border: 1px solid #e0e5ec; border-radius: 11px; background: white; text-align: left; cursor: pointer; }
.demo-choice-row button b { color: #101828; font-size: 12.5px; }
.demo-choice-row button small { color: #98a2b3; font-size: 10.5px; }
.demo-choice-row button:hover, .demo-choice-row button.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, white); }

.demo-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.demo-chip-row button { padding: 8px 12px; border: 1px solid #e0e5ec; border-radius: 999px; background: white; color: #475467; font-size: 11px; cursor: pointer; }
.demo-chip-row button:hover { border-color: var(--accent); color: var(--accent); }

/* Filter rows wrap rather than squeeze: a select narrower than its own label
   plus the 32px chevron gutter clips the option text. */
.demo-filter-row { flex-wrap: wrap; }
.demo-filter-row > label { min-width: 0; }
.demo-filter-row :is(select, input) { min-width: 112px; }
.demo-filter-row input[type="search"] { min-width: 168px; }

/* The property search carries five filters, which is more than fits beside the
   heading — give them their own full-width row that reflows by track count
   instead of letting them wrap into a ragged block. */
.demo-property-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
.demo-property-toolbar .demo-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}
.demo-property-toolbar .demo-filter-row > label:first-child { grid-column: span 2; }

/* --------------------------------------------------------------------------
   Slots
   -------------------------------------------------------------------------- */

.demo-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; margin-bottom: 8px; }
.demo-slot { display: grid; gap: 3px; padding: 10px 8px; border: 1px solid #d8dde6; border-radius: 10px; background: white; color: #344054; text-align: center; cursor: pointer; }
.demo-slot b { font-size: 12.5px; line-height: 1.25; }
.demo-slot small { color: #98a2b3; font-size: 9.5px; line-height: 1.25; }
.demo-slot:hover:not(:disabled) { border-color: var(--accent); }
.demo-slot.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, white); color: var(--accent); }
.demo-slot.is-limited small { color: #b54708; }
.demo-slot:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* --------------------------------------------------------------------------
   Flow overlay
   -------------------------------------------------------------------------- */

.demo-flow-host { position: absolute; inset: 0; z-index: 6; display: none; }
.demo-flow-host.is-open { display: block; }
.demo-flow { display: flex; flex-direction: column; height: 100%; background: #f5f7fb; }
.demo-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid #e2e6ed; background: white; }
.demo-flow-head small { color: var(--accent); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-flow-head h3 { margin: 3px 0 0; color: #101828; font-size: 18px; }
.demo-flow-close { width: 36px; height: 36px; border: 1px solid #d8dde6; border-radius: 10px; background: white; color: #667085; font-size: 20px; cursor: pointer; }
.demo-flow-close:hover { color: #101828; }

.demo-flow-steps { display: flex; gap: 8px; margin: 0; padding: 12px 22px; list-style: none; border-bottom: 1px solid #e9edf2; background: white; overflow-x: auto; scrollbar-width: none; }
.demo-flow-steps::-webkit-scrollbar { display: none; }
.demo-flow-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; color: #98a2b3; font-size: 11px; font-weight: 600; white-space: nowrap; }
.demo-flow-steps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eceff4; color: #98a2b3; font-size: 10px; font-style: normal; font-weight: 800; }
.demo-flow-steps li.is-active { background: color-mix(in srgb, var(--accent) 10%, white); color: var(--accent); }
.demo-flow-steps li.is-active i { background: var(--accent); color: white; }
.demo-flow-steps li.is-done { color: #344054; }
.demo-flow-steps li.is-done i { background: #35b76f; color: white; }

.demo-flow-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr); gap: 18px; padding: 20px 22px; overflow: auto; }
.demo-flow-body.is-confirmation { grid-template-columns: minmax(0, 1fr); place-items: start center; }
.demo-flow-main { min-width: 0; padding: 22px; border: 1px solid #e0e5ec; border-radius: 15px; background: white; box-shadow: 0 4px 16px rgba(16, 24, 40, .035); }
.demo-flow-body.is-confirmation .demo-flow-main { width: min(620px, 100%); }
.demo-step-head { margin-bottom: 18px; }
.demo-step-head h4 { margin: 0; color: #101828; font-size: 17px; }
.demo-step-head p { margin: 6px 0 0; color: #667085; font-size: 12px; line-height: 1.6; }
.demo-step-head p b { color: #344054; }

.demo-flow-side { align-self: start; }
.demo-summary-card { padding: 18px; border: 1px solid #e0e5ec; border-radius: 15px; background: white; }
.demo-summary-head { margin-bottom: 14px; }
.demo-summary-head small { color: #98a2b3; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.demo-summary-head h4 { margin: 4px 0 0; color: #101828; font-size: 15px; }
.demo-summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f2f6; color: #475467; font-size: 11.5px; }
.demo-summary-line small { display: block; margin-top: 2px; color: #98a2b3; font-size: 10px; }
.demo-summary-line b { color: #101828; white-space: nowrap; }
.demo-summary-empty { margin: 0; color: #98a2b3; font-size: 11.5px; }
.demo-summary-totals { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e9edf2; }
.demo-summary-total { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: #667085; font-size: 11.5px; }
.demo-summary-total.is-strong { color: #101828; font-size: 14px; font-weight: 700; }
.demo-summary-total.is-credit b { color: #269b63; }
.demo-summary-note { margin: 12px 0 0; color: #98a2b3; font-size: 10.5px; line-height: 1.6; }

.demo-flow-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 22px; border-top: 1px solid #e2e6ed; background: white; }
.demo-flow-due small { display: block; color: #98a2b3; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.demo-flow-due b { color: #101828; font-size: 19px; }
.demo-flow-actions { display: flex; gap: 9px; }
.demo-flow-actions .demo-primary { display: inline-flex; align-items: center; gap: 9px; }

/* --------------------------------------------------------------------------
   Payment step
   -------------------------------------------------------------------------- */

.demo-pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.demo-pay-method { display: grid; gap: 3px; padding: 13px; border: 1px solid #e0e5ec; border-radius: 11px; background: white; text-align: left; cursor: pointer; }
.demo-pay-method b { color: #101828; font-size: 12.5px; }
.demo-pay-method small { color: #98a2b3; font-size: 10.5px; }
.demo-pay-method:hover { border-color: var(--accent); }
.demo-pay-method.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }

.demo-card-fields .demo-field[data-brand]::after { content: attr(data-brand); position: absolute; right: 12px; bottom: 30px; color: #667085; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.demo-card-fields .demo-field { position: relative; }
.demo-card-fields .demo-field[data-brand=""]::after { content: none; }

.demo-test-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 12px; border: 1px dashed #d8dde6; border-radius: 10px; }
.demo-test-cards b { color: #667085; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.demo-test-cards button { padding: 6px 10px; border: 1px solid #e0e5ec; border-radius: 999px; background: white; color: #475467; font-size: 10.5px; cursor: pointer; }
.demo-test-cards button:hover { border-color: var(--accent); color: var(--accent); }

.demo-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border-radius: 11px; background: #101828; color: white; }
.demo-wallet-chip { padding: 9px 16px; border-radius: 8px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 700; }
.demo-wallet p { flex: 1 1 200px; margin: 0; color: rgba(255, 255, 255, .7); font-size: 11px; }

.demo-pay-trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eaecf0; color: #98a2b3; font-size: 10.5px; }

/* --------------------------------------------------------------------------
   Confirmation
   -------------------------------------------------------------------------- */

.demo-confirm { text-align: center; }
.demo-confirm-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: #e7f7ee; color: #12855a; font-size: 26px; }
.demo-confirm h3 { margin: 0; color: #101828; font-size: 21px; }
.demo-confirm > p { margin: 8px auto 18px; max-width: 44ch; color: #667085; font-size: 12.5px; line-height: 1.6; }
.demo-confirm-ref { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border: 1px dashed #d8dde6; border-radius: 11px; text-align: left; }
.demo-confirm-ref small { display: block; color: #98a2b3; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.demo-confirm-ref b { color: #101828; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 17px; letter-spacing: .04em; }
.demo-confirm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; text-align: left; }
.demo-confirm-grid > div { padding: 11px 13px; border-radius: 10px; background: #f6f8fb; }
.demo-confirm-grid small { display: block; color: #98a2b3; font-size: 10px; }
.demo-confirm-grid b { display: block; margin-top: 3px; color: #101828; font-size: 12.5px; }
.demo-confirm-items { text-align: left; }
.demo-confirm-items > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f2f6; color: #475467; font-size: 12px; }
.demo-confirm-items small { display: block; color: #98a2b3; font-size: 10px; }
.demo-confirm-items .is-total { border-bottom: 0; color: #101828; font-weight: 700; }
.demo-confirm-sub { margin: 20px 0 10px; color: #101828; font-size: 13px; text-align: left; }
.demo-confirm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 18px; }
.demo-confirm-foot { margin: 14px 0 0; color: #98a2b3; font-size: 10px; }

.demo-timeline { margin: 0; padding: 0 0 0 4px; list-style: none; text-align: left; }
.demo-timeline li { position: relative; padding: 0 0 16px 24px; border-left: 2px solid #e4e7ec; }
.demo-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.demo-timeline li::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; background: #d0d5dd; }
.demo-timeline li.is-done::before { background: #35b76f; }
.demo-timeline li.is-active::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.demo-timeline li.is-skipped { opacity: .5; text-decoration: line-through; }
.demo-timeline b { display: block; color: #344054; font-size: 12px; }
.demo-timeline small { color: #98a2b3; font-size: 10px; }

/* --------------------------------------------------------------------------
   Activity
   -------------------------------------------------------------------------- */

.demo-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.demo-activity-head small { color: #98a2b3; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.demo-activity-head h4 { margin: 4px 0 0; color: #101828; font-size: 18px; }
.demo-activity-empty { padding: 44px 24px; border: 1px dashed #d8dde6; border-radius: 14px; text-align: center; }
.demo-activity-empty h4 { margin: 0 0 8px; color: #101828; font-size: 16px; }
.demo-activity-empty p { margin: 0 auto 16px; max-width: 46ch; color: #667085; font-size: 12px; line-height: 1.6; }
.demo-activity-list { display: grid; gap: 12px; }
.demo-activity-card { padding: 16px; border: 1px solid #e0e5ec; border-left: 3px solid #35b76f; border-radius: 13px; background: white; }
.demo-activity-card.is-cancelled { border-left-color: #d0d5dd; opacity: .78; }
.demo-activity-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.demo-activity-card header small { display: block; color: #98a2b3; font-size: 10.5px; }
.demo-activity-card header b { display: block; margin-top: 3px; color: #101828; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 14px; }
.demo-activity-status { padding: 5px 10px; border-radius: 999px; background: #e7f7ee; color: #12855a; font-size: 10px; font-weight: 800; }
.is-cancelled .demo-activity-status { background: #f2f4f7; color: #667085; }
.demo-activity-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.demo-activity-meta span { padding: 5px 9px; border-radius: 7px; background: #f4f6fa; color: #475467; font-size: 10.5px; }
.demo-activity-card details summary { color: var(--accent); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.demo-activity-detail { padding-top: 12px; }
.demo-activity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 12px; }

/* --------------------------------------------------------------------------
   Sabor: menu + cart
   -------------------------------------------------------------------------- */

.demo-mode-switch { display: flex; gap: 7px; }
.demo-mode-switch button { display: grid; gap: 2px; padding: 9px 13px; border: 1px solid #e0e5ec; border-radius: 10px; background: white; text-align: left; cursor: pointer; }
.demo-mode-switch b { color: #344054; font-size: 12px; }
.demo-mode-switch small { color: #98a2b3; font-size: 9.5px; }
.demo-mode-switch button.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); }
.demo-mode-switch button.is-active b { color: var(--accent); }

.demo-order-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: 16px; align-items: start; }
.demo-menu-controls { display: grid; gap: 10px; margin-bottom: 16px; }
.demo-menu-grid { display: grid; gap: 10px; }
.demo-menu-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px; border: 1px solid #e4e7ec; border-radius: 11px; }
.demo-menu-card.is-in-cart { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, white); }
.demo-menu-card b { display: block; color: #101828; font-size: 12.5px; }
.demo-menu-card small { display: block; margin-top: 3px; color: #667085; font-size: 10.5px; }
.demo-menu-buy { display: grid; gap: 7px; justify-items: end; }
.demo-menu-buy strong { color: #101828; font-size: 12.5px; }

.demo-stepper-control { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #d8dde6; border-radius: 8px; overflow: hidden; }
.demo-stepper-control button { width: 28px; height: 28px; border: 0; background: white; color: var(--accent); font-size: 15px; cursor: pointer; }
.demo-stepper-control button:hover { background: #f4f6fa; }
.demo-stepper-control b { min-width: 22px; color: #101828; font-size: 12px; text-align: center; }

.demo-cart { align-self: start; position: sticky; top: 0; }
.demo-cart-lines { display: grid; gap: 4px; margin-bottom: 14px; }
.demo-cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 26px; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #f0f2f6; }
.demo-cart-line b { display: block; color: #344054; font-size: 11.5px; }
.demo-cart-line small { display: block; color: #98a2b3; font-size: 10px; }
.demo-cart-line strong { color: #101828; font-size: 11.5px; }

.demo-promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 6px; }
.demo-promo-hint { margin: 0 0 14px; color: #98a2b3; font-size: 10.5px; }
.demo-promo-hint.is-error { color: #d92d20; }
.demo-tip-row { display: flex; gap: 7px; margin-bottom: 14px; }
.demo-tip-row button { flex: 1; padding: 8px 4px; border: 1px solid #e0e5ec; border-radius: 8px; background: white; color: #475467; font-size: 11px; cursor: pointer; }
.demo-tip-row button.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, white); color: var(--accent); font-weight: 700; }

.demo-total-rows { margin: 12px 0; padding-top: 12px; border-top: 1px solid #eaecf0; }
.demo-total-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: #667085; font-size: 11.5px; }
.demo-total-rows b { color: #344054; }
.demo-total-rows .is-credit b { color: #269b63; }
.demo-total-rows .is-total { margin-top: 6px; padding-top: 9px; border-top: 1px solid #eaecf0; color: #101828; font-size: 14px; font-weight: 700; }
.demo-total-rows .is-total b { color: #101828; }

.demo-ritual-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f2f6; color: #475467; font-size: 11.5px; }
.demo-ritual-lines small { display: block; color: #98a2b3; font-size: 10px; }
.demo-treatment-grid em { color: #98a2b3; font-size: 10px; font-style: normal; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Plans, packages, services
   -------------------------------------------------------------------------- */

.demo-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.demo-plan-card { position: relative; display: flex; flex-direction: column; padding: 20px; border: 1px solid #e0e5ec; border-radius: 15px; background: white; }
.demo-plan-card.is-popular { border-color: var(--accent); box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 14%, transparent); }
.demo-plan-card.is-soft { background: #f8f9fc; }
.demo-plan-flag { position: absolute; top: -10px; left: 20px; padding: 4px 9px; border-radius: 999px; background: var(--accent); color: white; font-size: 9.5px; font-weight: 800; }
.demo-plan-card header small { display: block; color: #667085; font-size: 11.5px; font-weight: 700; }
.demo-plan-card header strong { display: block; margin: 6px 0 2px; color: #101828; font-size: 27px; }
.demo-plan-card header span { color: #98a2b3; font-size: 10.5px; }
.demo-plan-card ul { flex: 1; margin: 14px 0 16px; padding: 0; list-style: none; }
.demo-plan-card li { position: relative; padding: 6px 0 6px 20px; color: #475467; font-size: 11.5px; }
.demo-plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

.demo-plan-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.demo-plan-picker button { display: grid; gap: 3px; padding: 15px; border: 1px solid #e0e5ec; border-radius: 12px; background: white; text-align: left; cursor: pointer; }
.demo-plan-picker b { color: #667085; font-size: 11px; font-weight: 700; }
.demo-plan-picker strong { color: #101828; font-size: 20px; }
.demo-plan-picker small { color: #98a2b3; font-size: 10px; }
.demo-plan-picker em { margin-top: 5px; color: #475467; font-size: 10.5px; font-style: normal; }
.demo-plan-picker button.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, white); }

.demo-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.demo-service-grid article { padding: 13px; border: 1px solid #e4e7ec; border-radius: 11px; }
.demo-service-grid b { display: block; color: #101828; font-size: 12px; }
.demo-service-grid small { display: block; margin-top: 4px; color: #98a2b3; font-size: 10.5px; }

.demo-coach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.demo-coach-grid article { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e4e7ec; border-radius: 11px; }
.demo-coach-grid article > div:nth-child(2) { flex: 1; min-width: 0; }
.demo-coach-grid b { display: block; color: #101828; font-size: 12px; }
.demo-coach-grid small { display: block; color: #98a2b3; font-size: 10px; }

/* --------------------------------------------------------------------------
   Alta Verde
   -------------------------------------------------------------------------- */

.demo-property-badge { position: absolute; left: 9px; bottom: 9px; padding: 4px 8px; border-radius: 6px; background: rgba(16, 24, 40, .82); color: white; font-size: 9px; font-weight: 700; }

/* sites.css styles the card's image wrapper as `.demo-property-card > div`
   (fixed height, absolutely positioned round button for the heart). The
   actions row must stay outside that selector — it is a <footer> in the
   markup, and these rules keep it right even if that changes. */
.demo-property-card > .demo-card-actions {
  position: static;
  height: auto;
  margin: 2px 14px 0;
}
.demo-property-card > .demo-card-actions button {
  position: static;
  width: auto;
  height: auto;
  border-radius: 9px;
}
.demo-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.demo-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; padding: 11px 14px; border-radius: 11px; background: #101828; color: white; font-size: 11.5px; }
.demo-compare-bar b { color: white; }
.demo-compare-bar .demo-text-btn { color: #9fb0c9; }

.demo-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 12px 0 16px; }
.demo-detail-media { position: relative; overflow: hidden; border-radius: 15px; min-height: 260px; }
.demo-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.demo-detail-body small { color: var(--accent); font-size: 10.5px; font-weight: 700; }
.demo-detail-body h3 { margin: 6px 0 4px; color: #101828; font-size: 22px; }
.demo-detail-price { display: block; margin-bottom: 14px; color: #101828; font-size: 22px; }
.demo-detail-body p { color: #475467; font-size: 12.5px; line-height: 1.7; }
.demo-spec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.demo-spec-row div { padding: 10px; border-radius: 10px; background: #f4f6fa; text-align: center; }
.demo-spec-row b { display: block; color: #101828; font-size: 14px; }
.demo-spec-row span { color: #98a2b3; font-size: 9.5px; }
.demo-agent { margin: 14px 0; padding: 12px; border-radius: 10px; background: #f4f6fa; }
.demo-agent b { display: block; color: #101828; font-size: 12.5px; }
.demo-agent small { color: #98a2b3; font-size: 10.5px; }
.demo-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.demo-mortgage { margin-top: 6px; }

.demo-compare-scroll { overflow-x: auto; }
.demo-compare table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.demo-compare th, .demo-compare td { padding: 10px 12px; border-bottom: 1px solid #f0f2f6; text-align: left; white-space: nowrap; }
.demo-compare thead th { color: #101828; font-size: 12px; }
.demo-compare tbody th { color: #98a2b3; font-weight: 600; }
.demo-compare td { color: #344054; }

.demo-offer-gauge { margin: 12px 0 0; padding: 11px 13px; border-radius: 9px; background: #f4f6fa; color: #475467; font-size: 11.5px; }
.demo-offer-gauge.is-strong { background: #e7f7ee; color: #12855a; }
.demo-offer-gauge.is-fair { background: #fff5e6; color: #a1620a; }
.demo-offer-gauge.is-low { background: #fdeceb; color: #b42318; }

/* --------------------------------------------------------------------------
   Summit
   -------------------------------------------------------------------------- */

.demo-class-list article.is-full { opacity: .72; }
.demo-chat { display: flex; flex-direction: column; gap: 12px; }
.demo-chat-thread { display: grid; gap: 10px; max-height: 320px; padding-right: 4px; overflow-y: auto; }
.demo-bubble { max-width: 74%; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: #f2f4f8; }
.demo-bubble small { display: block; margin-bottom: 3px; color: var(--accent); font-size: 10px; font-weight: 800; }
.demo-bubble p { margin: 0; color: #344054; font-size: 12px; line-height: 1.55; }
.demo-bubble time { display: block; margin-top: 5px; color: #98a2b3; font-size: 9.5px; }
.demo-bubble.is-you { margin-left: auto; border-radius: 14px 14px 4px; background: var(--accent); }
.demo-bubble.is-you p, .demo-bubble.is-you time { color: white; }
.demo-bubble.is-you time { opacity: .75; }
.demo-bubble.is-typing { display: flex; gap: 4px; width: 52px; padding: 14px 13px; }
.demo-bubble.is-typing span { width: 6px; height: 6px; border-radius: 50%; background: #98a2b3; animation: demo-typing 1.1s infinite; }
.demo-bubble.is-typing span:nth-child(2) { animation-delay: .15s; }
.demo-bubble.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes demo-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.demo-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }

/* --------------------------------------------------------------------------
   Pulse
   -------------------------------------------------------------------------- */

.demo-kpis em.is-down { color: #d92d20; }
.demo-spark { width: 100%; height: 26px; margin-top: 8px; }
.demo-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.demo-chart i:focus-visible span, .demo-chart i:hover span { display: block; position: absolute; top: -22px; left: 50%; padding: 3px 7px; border-radius: 6px; background: #101828; color: white; font-size: 9.5px; white-space: nowrap; transform: translateX(-50%); }

.demo-channel-table { display: grid; gap: 4px; }
.demo-channel-row { border-bottom: 1px solid #f0f2f6; }
.demo-channel-row > button { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr auto auto 22px; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.demo-channel-row b { color: #344054; font-size: 12px; }
.demo-channel-row span { color: #667085; font-size: 11px; }
.demo-channel-row strong { color: #101828; font-size: 12px; }
.demo-channel-row em { color: #269b63; font-size: 11px; font-style: normal; font-weight: 700; }
.demo-channel-row em.is-down { color: #d92d20; }
.demo-channel-row i { color: #98a2b3; font-style: normal; }
.demo-channel-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; padding: 0 0 14px; }
.demo-channel-detail > div { padding: 10px; border-radius: 9px; background: #f6f8fb; }
.demo-channel-detail small { display: block; color: #98a2b3; font-size: 9.5px; }
.demo-channel-detail b { color: #101828; font-size: 13px; }

.demo-skeleton { display: grid; gap: 12px; padding: 8px 0; }
.demo-skeleton-row, .demo-skeleton-block { border-radius: 12px; background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%); background-size: 400% 100%; animation: demo-shimmer 1.3s ease infinite; }
.demo-skeleton-row { height: 84px; }
.demo-skeleton-block { height: 240px; }
@keyframes demo-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.demo-recipients { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.demo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 11px; border-radius: 999px; background: #f1f3f8; color: #344054; font-size: 11px; }
.demo-chip button { width: 17px; height: 17px; border: 0; border-radius: 50%; background: #d7dce5; color: #475467; font-size: 12px; line-height: 1; cursor: pointer; }
.demo-recipient-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }

.demo-report-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #f0f2f6; }
.demo-report-row.is-paused { opacity: .6; }
.demo-report-row b { display: block; color: #101828; font-size: 12.5px; }
.demo-report-row small { display: block; margin-top: 3px; color: #98a2b3; font-size: 10.5px; }
.demo-report-actions { display: flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------------
   NovaWorks
   -------------------------------------------------------------------------- */

.demo-brief-list { margin: 0; padding-left: 0; list-style: none; counter-reset: brief; }
.demo-brief-list li { padding: 12px 0; border-bottom: 1px solid #f0f2f6; }
.demo-brief-list b { display: block; color: #101828; font-size: 12.5px; }
.demo-brief-list p { margin: 5px 0 6px; color: #667085; font-size: 11.5px; line-height: 1.6; }
.demo-brief-list span { color: var(--accent); font-size: 11px; font-weight: 700; }
.demo-brief-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.demo-add-form { margin-bottom: 16px; }

.demo-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.demo-board-col header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #667085; }
.demo-board-col header b { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.demo-board-col header span { padding: 1px 7px; border-radius: 999px; background: #eef1f6; font-size: 10px; }
.demo-board-drop { display: grid; gap: 8px; align-content: start; min-height: 120px; padding: 8px; border: 1px dashed transparent; border-radius: 11px; background: #f1f3f8; }
.demo-board-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); }
.demo-board-drop article { padding: 11px; border: 1px solid #e4e7ec; border-radius: 9px; background: white; cursor: grab; }
.demo-board-drop article.is-dragging { opacity: .45; }
.demo-board-drop b { display: block; color: #344054; font-size: 11.5px; }
.demo-board-drop small { display: block; margin-top: 4px; color: #98a2b3; font-size: 9.5px; }
.demo-board-drop progress { width: 100%; height: 4px; margin-top: 8px; accent-color: var(--accent); }
.demo-board-empty { margin: 0; padding: 14px 4px; color: #a9b2c2; font-size: 10.5px; text-align: center; }
.demo-card-controls { display: flex; gap: 5px; margin-top: 8px; }
.demo-card-controls button { width: 24px; height: 24px; border: 1px solid #e4e7ec; border-radius: 6px; background: white; color: #667085; font-size: 10px; cursor: pointer; }
.demo-card-controls button:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   Landing page helpers
   -------------------------------------------------------------------------- */

.site-cta-note { margin-top: 14px; font-size: 12px; opacity: .72; }
.site-form-note { margin: 8px 0 0; font-size: 12px; }
.site-form-note.is-error { color: #d92d20; }
.site-form-note.is-ok { color: #12855a; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .demo-flow-body { grid-template-columns: minmax(0, 1fr); }
  .demo-flow-side { order: -1; }
  .demo-order-layout, .demo-detail { grid-template-columns: minmax(0, 1fr); }
  .demo-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-cart { position: static; }
}

@media (max-width: 620px) {
  /* 16px keeps iOS from zooming the page when a field takes focus, and the
     taller control is a better touch target. */
  :is(.demo-app-content, .demo-flow-host)
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { min-height: 44px; font-size: 16px; }
  .demo-pad { padding: 14px; }
  .demo-tabs { padding: 8px 12px 0; }
  .demo-field-grid, .demo-addon-row { grid-template-columns: minmax(0, 1fr); }
  /* Fields opt into a full-width span inline; on one column that would create
     a phantom second track, so collapse every span back to one. */
  .demo-field-grid > [style*="span 2"] { grid-column: span 1 !important; }
  .demo-flow-head, .demo-flow-steps, .demo-flow-body, .demo-flow-foot { padding-inline: 14px; }
  .demo-flow-main { padding: 16px; }
  .demo-flow-steps li span { display: none; }
  .demo-flow-steps li.is-active span { display: inline; }
  .demo-flow-foot { flex-wrap: wrap; }
  .demo-flow-actions { flex: 1; }
  .demo-flow-actions .demo-primary { flex: 1; justify-content: center; }
  .demo-mode-switch { width: 100%; }
  .demo-mode-switch button { flex: 1; }
  .demo-spec-row { grid-template-columns: repeat(2, 1fr); }
  .demo-board { grid-template-columns: minmax(0, 1fr); }
  .demo-menu-card { flex-direction: column; align-items: flex-start; }
  .demo-menu-buy { justify-items: start; }
  .demo-bubble { max-width: 88%; }
  /* the sessions cell is hidden here, so four cells remain — not three */
  .demo-channel-row > button { grid-template-columns: minmax(0, 1fr) auto auto 20px; gap: 8px; }
  .demo-channel-row span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-spinner, .demo-skeleton-row, .demo-skeleton-block, .demo-bubble.is-typing span { animation: none; }
}