/* Demo stand pages on top of /ui/ui.css and /ui/pages.css: the shop, the order page with its
   behind-the-scenes trace, and the test acquirer form. */

/* ───────── demo stand strip ───────── */
.demo-strip { position: relative; z-index: 20; padding: 8px 16px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .78); background: #1C1C1E; }
.demo-strip b { color: #fff; font-weight: 600; }
.demo-strip a { color: #FF7A3D; margin-left: 6px; font-weight: 600; }

/* ───────── shop ───────── */
.shopbar { position: sticky; top: 0; z-index: 10; padding: 10px var(--s4); }
.shopbar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: var(--s4); padding: 8px 8px 8px 14px; border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border: .5px solid var(--glass-edge); }
.shop-brand { display: flex; align-items: center; gap: 10px; color: var(--label); margin-right: auto; }
.shop-brand:hover { text-decoration: none; }
.shop-brand b { display: block; font: 600 15px/1.15 var(--font-display); letter-spacing: -.02em; }
.shop-brand small { display: block; font-size: 11px; color: var(--label-2); }
.shopbar .chips a { flex: none; min-height: 30px; padding: 0 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; font: 500 13px/1 var(--font); color: var(--label); }
.shopbar .chips a:hover { text-decoration: none; background: var(--fill-4); }
.shopbar .chips a.on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
@media (prefers-color-scheme: dark) { .shopbar .chips a.on { background: #636366; } }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
  background: var(--tint); color: #fff; font: 600 14px/1 var(--font-rounded); }
.ico-mask.cart { --i: var(--i-cart); width: 18px; height: 18px; }
.cart-btn.bump { animation: bump .45s var(--ease-bounce); }
@keyframes bump { 40% { transform: scale(1.14); } }
@media (max-width: 720px) {
  .shopbar-in { flex-wrap: wrap; border-radius: var(--r-lg); gap: var(--s2); }
  .shopbar .chips { order: 3; width: 100%; }
  .shopbar .chips a { flex: 1; justify-content: center; }
}

.shop { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s10); }
.niche { padding-top: var(--s4); }
.js .niche { display: none; }
.js .niche.on { display: block; animation: fade-in .4s ease; }
.niche-head { max-width: 640px; margin: var(--s4) 0 var(--s8); }
.eyebrow { font: 600 13px/1.3 var(--font); color: var(--tint-text); margin-bottom: var(--s2); }
.niche-head h1 { font-size: 48px; line-height: 1.06; letter-spacing: -.035em; }
.niche-head .lead { margin-top: var(--s3); max-width: 40ch; }
@media (max-width: 720px) { .niche-head h1 { font-size: 34px; } }
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 960px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .products { grid-template-columns: minmax(0, 1fr); } }
.product { background: var(--surface); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.product:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .1); }
.product-in { padding: var(--s5); display: grid; gap: 4px; flex: 1; align-content: start; }
.product h3 { font: 600 19px/1.25 var(--font-display); letter-spacing: -.02em; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }
.price { font: 600 21px/1 var(--font-rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* one prominent action per view (HIG): the card button is a grey capsule with a tinted label */
.product .add { background: var(--fill-3); color: var(--tint-text); box-shadow: none; min-height: 34px; }
.product .add:hover { background: var(--fill-2); filter: none; }
.product .add.in { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-text); }
body.shop-page { background: var(--wash), #F5F5F7; }
@media (prefers-color-scheme: dark) { body.shop-page { background: var(--wash), #000; } }

/* product art: a soft gradient and an SF Symbols-style glyph, per niche */
.art { aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; overflow: hidden; }
.art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, .45), transparent 55%); }
.art-school { background: linear-gradient(150deg, #7D7AFF 0%, #5856D6 50%, #3634A3 100%); }
.art-travel { background: linear-gradient(150deg, #6FE3F5 0%, #30B0C7 48%, #007AFF 100%); }
.art-rent { background: linear-gradient(150deg, #FFC46B 0%, #FF9500 45%, #F94603 100%); }
.product:nth-child(2) .art { filter: hue-rotate(-14deg) saturate(1.05); }
.product:nth-child(3) .art { filter: hue-rotate(14deg) saturate(1.05); }
.glyph { width: 34%; aspect-ratio: 1; background: #fff; position: relative; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18));
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; transition: transform .5s var(--ease); }
.product:hover .glyph { transform: scale(1.06) rotate(-2deg); }
.g-school-english { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.2 2.7 3 6 3s6-1.8 6-3v-5M22 9v6'/%3E%3C/svg%3E"); }
.g-school-photo { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.5' y='7' width='19' height='13' rx='3'/%3E%3Cpath d='M8 7l1.5-2.5h5L16 7'/%3E%3Ccircle cx='12' cy='13.5' r='3.6'/%3E%3C/svg%3E"); }
.g-school-consult { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 4.5h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 9h3a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1v2.5L15.5 18H12a2 2 0 0 1-1.7-1'/%3E%3C/svg%3E"); }
.g-travel-week { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M12 2.5v1.2M5.5 9H4.3M19.7 9h-1.2M7.3 4.3l.9.9M16.7 4.3l-.9.9'/%3E%3Cpath d='M2 16.5c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5M2 20.5c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5'/%3E%3C/svg%3E"); }
.g-travel-islands { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3v13'/%3E%3Cpath d='M12 4l7 11h-7M11 7.5L5.5 15H11'/%3E%3Cpath d='M3 18.5c3 2.2 15 2.2 18 0'/%3E%3C/svg%3E"); }
.g-travel-transfer { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 15.5V9a2 2 0 0 1 2-2h11l4 4.5v4a1 1 0 0 1-1 1h-1M3 15.5h1M9.5 16.5h5M3 11.5h17M8 7v4.5M13 7v4.5'/%3E%3Ccircle cx='7' cy='16.5' r='2'/%3E%3Ccircle cx='16.5' cy='16.5' r='2'/%3E%3C/svg%3E"); }
.g-rent-scooter { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='5.5' cy='17' r='2.5'/%3E%3Ccircle cx='18.5' cy='17' r='2.5'/%3E%3Cpath d='M8 17h7.5l3-6.5-2-4.5h-2.5M14 6h3M4 14h7.5l2-3.5'/%3E%3C/svg%3E"); }
.g-rent-villa { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 10.5 12 4l8.5 6.5'/%3E%3Cpath d='M5.5 9.2V16h13V9.2M10 16v-4h4v4'/%3E%3Cpath d='M2 20c2 0 2-1.3 4-1.3s2 1.3 4 1.3 2-1.3 4-1.3 2 1.3 4 1.3 2-1.3 4-1.3'/%3E%3C/svg%3E"); }
.g-rent-car { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 16.5v-3.3l1.9-4.6A2 2 0 0 1 6.7 7.3h10.6a2 2 0 0 1 1.8 1.3l1.9 4.6v3.3'/%3E%3Cpath d='M3 16.5h1.7M9.3 16.5h5.4M19.3 16.5H21M4 12.5h16'/%3E%3Ccircle cx='7' cy='16.8' r='2'/%3E%3Ccircle cx='17' cy='16.8' r='2'/%3E%3C/svg%3E"); }

/* how it works */
.how { margin-top: var(--s10); padding: var(--s8); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.how h2 { font-size: 28px; letter-spacing: -.03em; }
.steps3 { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.steps3 li { display: grid; gap: 6px; align-content: start; justify-items: start; }
.steps3 b { font: 600 17px/1.3 var(--font-display); letter-spacing: -.02em; margin-top: var(--s2); }
.steps3 span:not(.row-ico) { color: var(--label-2); font-size: 15px; }
@media (max-width: 760px) { .steps3 { grid-template-columns: minmax(0, 1fr); } .how { padding: var(--s6) var(--s5); } }

/* cart sheet */
.cart-lines { display: grid; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; padding: 12px 0; border-bottom: .5px solid var(--separator); }
.cart-line b { font-weight: 500; }
.cart-line .price { font-size: 16px; min-width: 96px; text-align: right; }
.stepper { display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--fill-3); }
.stepper button { width: 32px; height: 30px; border: 0; background: none; font: 600 17px/1 var(--font-rounded); color: var(--label); border-radius: var(--r-pill); }
.stepper button:hover { background: var(--fill-3); }
.stepper span { min-width: 22px; text-align: center; font: 600 14px/1 var(--font-rounded); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; }
.cart-total b { font: 700 26px/1 var(--font-rounded); letter-spacing: -.02em; }

/* ───────── order page: the buyer on the left, behind the scenes on the right ───────── */
.order { max-width: 1120px; margin: 0 auto; padding: var(--s8) var(--s4) var(--s10); display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .order { grid-template-columns: minmax(0, 1fr); } .order .status-card { position: static; } }
.order .status-card { width: auto; text-align: left; justify-items: stretch; padding: var(--s6); position: sticky; top: var(--s4); }
.order .status-card .status-ico { justify-self: start; }
.order .rows { margin: var(--s2) 0; }
.order .rows .sum dt, .order .rows .sum dd { color: var(--label); font-weight: 700; }
.status-ico.wait::after { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); background: var(--orange-text); }
.status-ico.wait { background: color-mix(in srgb, var(--orange) 16%, transparent); animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.92); opacity: .75; } }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s3); position: relative; padding-bottom: var(--s5); }
.step::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; border-radius: 2px; background: var(--separator); }
.step:last-child::before { display: none; }
.step.done::before { background: color-mix(in srgb, var(--green) 50%, transparent); }
.dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-3); position: relative; z-index: 1; }
.dot::after { content: ""; width: 12px; height: 12px; background: var(--label-3); border-radius: 50%; }
.step.done .dot { background: var(--green); animation: pop .5s var(--ease-bounce); }
.step.done .dot::after { width: 16px; height: 16px; border-radius: 0; background: #fff; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.step.bad .dot { background: var(--red); }
.step.bad .dot::after { width: 14px; height: 14px; border-radius: 0; background: #fff; -webkit-mask: var(--i-x) center / contain no-repeat; mask: var(--i-x) center / contain no-repeat; }
.step.wait .dot::after { background: var(--orange); animation: breathe 1.4s ease-in-out infinite; }
.step-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 14px var(--s4); display: grid; gap: 4px; min-width: 0; }
.step-card header { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.step-card header b { font: 600 16px/1.3 var(--font-display); letter-spacing: -.015em; }
.step-card time { font: 500 12px/1 var(--font-rounded); color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-card p { color: var(--label-2); font-size: 14px; }
.step:not(.done):not(.bad) .step-card { opacity: .62; }
.step-card details { margin-top: var(--s2); }
.step-card summary { cursor: pointer; color: var(--tint-text); font-size: 13px; font-weight: 600; list-style: none; }
.step-card summary::-webkit-details-marker { display: none; }
.step-card summary::after { content: " ›"; }
.step-card details[open] summary::after { content: " ⌄"; }
.step-card pre.code { margin-top: var(--s2); max-height: 320px; }
.money-rows { margin: var(--s2) 0 0; display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s4); font-size: 15px; }
.money-rows dt { color: var(--label-2); }
.money-rows dd { margin: 0; text-align: right; font: 600 15px/1.3 var(--font-rounded); font-variant-numeric: tabular-nums; }
.money-rows .net { color: var(--green-text); font-size: 19px; }

/* ───────── test acquirer page ───────── */
.acq-head { display: flex; justify-content: space-between; align-items: center; }
.acq-logo { font: 700 15px/1 var(--font-display); letter-spacing: -.02em; color: var(--label-2); }
.acq-form { display: grid; gap: var(--s3); }
.acq-form input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.seg { display: flex; width: 100%; }
.seg label { flex: 1; justify-content: center; min-height: 32px; display: inline-flex; align-items: center; border-radius: var(--r-pill); font: 600 13px/1 var(--font); color: var(--label); cursor: pointer; }
#m-card:checked ~ .seg label[for="m-card"], #m-sbp:checked ~ .seg label[for="m-sbp"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pane { display: none; gap: var(--s3); }
#m-card:checked ~ .card-pane, #m-sbp:checked ~ .sbp-pane { display: grid; }
.fake-card { aspect-ratio: 1.586; border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  color: #fff; font: 600 18px/1.2 var(--font-mono); letter-spacing: .06em; background: linear-gradient(135deg, #3A3A3C, #1C1C1E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 10px 24px rgba(0, 0, 0, .2); }
.fake-card .muted { color: rgba(255, 255, 255, .6); font-size: 13px; }
.sbp-box { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; color: var(--label-2); }
.ico-mask.qr { --i: var(--i-qr); width: 44px; height: 44px; color: var(--label); }