/* CB Clinic payment page. Palette sampled from the printed A5 card:
   paper #fcfbf9, gold #a27e2b, ink #000. No webfonts, no external requests. */

:root{
  --paper:#fcfbf9;
  --ink:#14120e;
  --muted:#6b6459;
  --gold:#a27e2b;
  --gold-dark:#8a6a22;
  --line:#e4dfd4;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main{
  max-width:30rem;
  margin:0 auto;
  padding:1.6rem 1.15rem 2.2rem;
}

/* ---------- header ---------- */

.eyebrow{
  margin:0 0 .35rem;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

h1{
  margin:0 0 .5rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.72rem;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.01em;
}

.lede{
  margin:0 0 1.5rem;
  color:var(--muted);
  font-size:.94rem;
}

/* ---------- pay buttons ---------- */

.pay{display:flex;flex-direction:column;gap:.65rem}

.btn{
  display:block;
  padding:.85rem 1rem;
  border-radius:.7rem;
  text-decoration:none;
  text-align:center;
  border:1.5px solid var(--gold);
  transition:transform .06s ease;
}

.btn:active{transform:scale(.99)}

.btn-main{display:block;font-size:1.02rem;font-weight:600;letter-spacing:.01em}
.btn-sub{display:block;font-size:.78rem;margin-top:.15rem;opacity:.85}

.btn-primary{background:var(--gold);color:var(--paper);border-color:var(--gold-dark)}
.btn-secondary{background:transparent;color:var(--gold-dark)}

.pick{
  margin:.7rem 0 0;
  font-size:.78rem;
  color:var(--muted);
  text-align:center;
}

/* ---------- transfer block ---------- */

.transfer{
  margin-top:1.8rem;
  padding:1.05rem 1.05rem .85rem;
  border:1px solid var(--line);
  border-radius:.7rem;
  background:#fff;
}

.transfer h2{
  margin:0 0 .8rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  font-weight:400;
}

dl{margin:0}

.row{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding:.55rem 0;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}

.row:first-child{border-top:0;padding-top:0}

dt{
  flex:0 0 5.6rem;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

dd{
  margin:0;
  flex:1 1 11rem;
  display:flex;
  align-items:baseline;
  gap:.55rem;
  justify-content:space-between;
}

.val{
  -webkit-user-select:all;
  user-select:all;   /* one tap selects the whole value, clipboard or not */
  font-size:.97rem;
  word-break:break-word;
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.93rem;
  letter-spacing:.01em;
}

.copy{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--gold-dark);
  font:inherit;
  font-size:.74rem;
  font-weight:600;
  padding:.3rem .6rem;
  border-radius:.45rem;
  cursor:pointer;
  min-height:2rem;
}

.copy:active{background:#f3efe6}
.copy.done{color:#2f6b3a;border-color:#bcd7c2}

.hint{
  margin:.7rem 0 0;
  font-size:.72rem;
  color:var(--muted);
}

/* ---------- notices ---------- */

.warn{
  margin:1.4rem 0 0;
  padding:.8rem .9rem;
  border-left:3px solid var(--gold);
  background:#f6f2e8;
  border-radius:0 .5rem .5rem 0;
  font-size:.8rem;
  line-height:1.45;
  color:#4a4438;
}

.onsite{
  margin:1.2rem 0 0;
  text-align:center;
  font-size:.88rem;
  color:var(--muted);
}

footer{
  margin-top:1.9rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.7rem;
  line-height:1.6;
  color:var(--muted);
}

footer p{margin:0}
footer a{color:var(--muted)}

@media (prefers-color-scheme:dark){
  :root{--paper:#141310;--ink:#f3efe6;--muted:#a49b8b;--line:#2f2b24;--gold:#c9a24a;--gold-dark:#dcb864}
  .transfer{background:#1b1915}
  .btn-primary{color:#141310}
  .copy{background:#221f1a}
  .copy:active{background:#2c2822}
  .warn{background:#221f18;color:#d6cfc0}
}