/* Benten demo pages (demo*.html). Builds on site.css. */

.demo-shell{ max-width:760px; margin:0 auto; }
.demo-narrow{ max-width:480px; margin:0 auto; }

.demo-card{
  background:var(--white); border:1px solid var(--paper-line); border-radius:16px;
  padding:32px 30px;
}
@media (max-width:520px){ .demo-card{ padding:24px 18px; } }
.demo-card + .demo-card{ margin-top:22px; }
.demo-card h2{
  font-family:var(--font-head); font-weight:600; font-size:1.3rem; margin:0 0 6px; color:var(--ink);
}
.demo-card .sub{ font-size:0.95rem; color:var(--ink-soft); margin:0 0 22px; line-height:1.55; }

/* fake third-party site chrome, so it's clear the page plays "your site" */
.fake-site{
  display:flex; align-items:center; gap:10px; margin:-32px -30px 24px; padding:12px 18px;
  border-bottom:1px solid var(--paper-line); border-radius:16px 16px 0 0;
  background:#fbfbfd; font-size:0.85rem; color:var(--ink-soft);
}
@media (max-width:520px){ .fake-site{ margin:-24px -18px 20px; } }
.fake-site .dots{ display:flex; gap:5px; }
.fake-site .dots i{ width:9px; height:9px; border-radius:50%; background:#d9dce6; display:block; }
.fake-site .url{
  flex:1; min-width:0; background:var(--white); border:1px solid var(--paper-line); border-radius:999px;
  padding:4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fake-brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.fake-brand .logo{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--footer-navy); color:#8fb3ff; font-family:var(--font-head); font-weight:700;
}
.fake-brand strong{ font-family:var(--font-head); font-size:1.15rem; color:var(--ink); }

/* form */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.86rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field .label-row{ display:flex; justify-content:space-between; gap:12px; }
.field .label-row span{ font-size:0.8rem; color:var(--ink-soft); font-weight:500; }
.field input, .field select{
  width:100%; font-family:var(--font-body); font-size:0.98rem;
  padding:11px 14px; border-radius:10px; border:1px solid var(--paper-line);
  background:var(--white); color:var(--ink);
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(50,116,240,0.15);
}
.field-row{ display:grid; grid-template-columns:2fr 3fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; gap:0; } }
.hint{ font-size:0.85rem; color:var(--ink-soft); margin:-6px 0 16px; line-height:1.5; }

.demo-btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--blue-light); color:var(--white); font-weight:600; font-size:1rem; font-family:var(--font-body);
  border:0; border-radius:10px; padding:13px 20px; cursor:pointer; transition:background 0.15s ease;
}
.demo-btn:hover{ background:var(--blue); }
.demo-btn:disabled{ opacity:0.6; cursor:not-allowed; }
.demo-btn.secondary{ background:var(--white); color:var(--blue); border:1px solid var(--paper-line); }
.demo-btn.secondary:hover{ background:#eef2ff; }
.btn-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
@media (max-width:520px){ .btn-pair{ grid-template-columns:1fr; } }

/* result / waiting panel */
.demo-status{
  display:none; margin-top:20px; border-radius:12px; padding:16px 18px; line-height:1.5;
  font-size:0.95rem; border:1px solid var(--paper-line); background:var(--paper);
}
.demo-status.show{ display:block; }
.demo-status .title{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); }
.demo-status .msg{ color:var(--ink-soft); margin-top:4px; }
.demo-status .msg:empty{ display:none; }
.demo-status .icon{ width:22px; height:22px; flex:0 0 auto; }
.demo-status.waiting{ background:rgba(50,116,240,0.06); border-color:rgba(50,116,240,0.25); }
.demo-status.approved{ background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.3); }
.demo-status.approved .title{ color:#15803d; }
.demo-status.denied, .demo-status.error{ background:rgba(229,72,77,0.07); border-color:rgba(229,72,77,0.3); }
.demo-status.denied .title, .demo-status.error .title{ color:#b42318; }
.demo-status.timedout{ background:rgba(234,179,8,0.09); border-color:rgba(202,138,4,0.35); }
.demo-status.timedout .title{ color:#92600a; }
.demo-status .countdown{ font-variant-numeric:tabular-nums; margin-left:auto; color:var(--blue); font-weight:600; }
.demo-status .actions{ margin-top:12px; }
.spinner{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:2.5px solid rgba(50,116,240,0.25); border-top-color:var(--blue-light);
  animation:demo-spin 0.9s linear infinite;
}
@keyframes demo-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation:none; } }

/* hub cards */
.demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
@media (max-width:700px){ .demo-grid{ grid-template-columns:1fr; } }
.demo-tile{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--paper-line); border-radius:16px; padding:24px;
  transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.demo-tile:hover{ border-color:var(--blue-light); transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,88,223,0.08); }
.demo-tile .num{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--footer-navy); color:#8fb3ff; font-family:var(--font-head); font-weight:600; font-size:0.9rem;
}
.demo-tile h3{ font-family:var(--font-head); font-weight:600; font-size:1.1rem; margin:0; color:var(--ink); }
.demo-tile p{ margin:0; font-size:0.95rem; line-height:1.55; color:var(--ink-soft); max-width:none; }
.demo-tile .go{ margin-top:auto; font-weight:600; color:var(--blue); font-size:0.92rem; }

.demo-steps{ margin:0; padding-left:20px; color:var(--ink-soft); line-height:1.7; font-size:0.98rem; }
.demo-steps li{ margin-bottom:4px; }
.demo-note{
  font-size:0.88rem; color:var(--ink-soft); line-height:1.55; margin:18px 0 0;
  padding-top:14px; border-top:1px solid var(--paper-line);
}
.demo-note a, .demo-card a.inline{ color:var(--blue); font-weight:600; }
.demo-back{ display:inline-block; margin-bottom:18px; font-weight:600; color:var(--blue); font-size:0.92rem; }

/* choice lists (items, cards, settings) */
.choices{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.choice{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  border:1px solid var(--paper-line); border-radius:12px; padding:12px 14px; background:var(--white);
}
.choice:hover{ border-color:#c9d4f2; }
.choice input{ margin:0; accent-color:var(--blue-light); width:18px; height:18px; flex:0 0 auto; }
.choice:has(input:checked){ border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(50,116,240,0.12); }
.choice .grow{ flex:1; min-width:0; }
.choice .name{ font-weight:600; color:var(--ink); }
.choice .meta{ font-size:0.86rem; color:var(--ink-soft); }
.choice .price{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.choice img{ height:22px; width:auto; max-width:48px; object-fit:contain; flex:0 0 auto; }
.section-label{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:600;
  color:var(--ink-soft); margin:4px 0 10px;
}

.signed-in{ text-align:center; }
.signed-in .badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(22,163,74,0.1); color:#15803d;
  font-size:0.85rem; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.hidden{ display:none !important; }

/* site.css styles every ".content p" for long-form text; keep the demo's small print small */
.content .hint{ font-size:0.85rem; line-height:1.5; margin:-6px 0 16px; max-width:none; }
.content .demo-note{ font-size:0.88rem; line-height:1.55; margin:18px 0 0; max-width:none; }
.content .demo-card .sub{ font-size:0.95rem; line-height:1.55; margin:0 0 22px; max-width:none; }
.content .choices .hint{ margin:0; }