/* ══════════════════════════════════════════════════════════
   pay.css — invoice payment page only
   Requires base.css to be loaded first
   ══════════════════════════════════════════════════════════ */

.shell{
  display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  min-height:100vh; min-height:100dvh;
}

/* ═══════════ BRAND PANEL ═══════════ */
.brand{
  background:var(--forest); color:var(--cream);
  padding:44px 42px;
  padding-top:calc(44px + env(safe-area-inset-top));
  padding-left:calc(42px + env(safe-area-inset-left));
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.brand::before{
  content:''; position:absolute; right:-160px; top:-120px;
  width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(168,128,47,.28), transparent 62%);
}
.brand > *{ position:relative; z-index:1; }

.brand-lede{ margin:52px 0; }
.brand-lede h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(32px, 3.3vw, 44px); line-height:1.08; letter-spacing:-.018em;
}
.brand-lede h1 em{ font-style:italic; color:var(--brass-lit); }
.brand-lede p{ margin-top:18px; max-width:34ch; color:rgba(237,232,220,.72); font-size:15px; }

.assurances{ list-style:none; display:grid; gap:14px; }
.assurances li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:13.5px; color:rgba(237,232,220,.78); line-height:1.55;
}
.assurances svg{ flex:none; margin-top:3px; stroke:var(--brass-lit); }

.brand-foot{
  margin-top:34px; padding-top:20px;
  border-top:1px solid rgba(237,232,220,.18);
  font-size:12.5px; color:rgba(237,232,220,.5);
}
.brand-foot a{
  color:rgba(237,232,220,.75); text-decoration:none;
  border-bottom:1px solid rgba(237,232,220,.28);
}
.brand-foot a:hover{ color:var(--brass-lit); border-color:var(--brass-lit); }

/* ═══════════ FORM PANEL ═══════════ */
.panel{
  display:flex; align-items:center; justify-content:center;
  padding:56px 40px;
  padding-bottom:calc(56px + env(safe-area-inset-bottom));
  padding-right:calc(40px + env(safe-area-inset-right));
}
.card{ width:100%; max-width:480px; }

.card h2{
  font-family:var(--serif); font-weight:400; font-size:28px;
  letter-spacing:-.012em; line-height:1.2;
}
p.intro{ color:var(--ink-soft); font-size:14.5px; margin-top:9px; }

form{ margin-top:30px; display:grid; gap:19px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field label{
  display:block; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;
}
.field label .opt{
  font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-faint);
}

/* 16px minimum stops iOS Safari zooming the page on focus */
input{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:#FFFDF9; border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; min-height:48px;
  appearance:none; -webkit-appearance:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
input::placeholder{ color:#B4B7AF; }
input:hover{ border-color:#C7BFAD; }
input:focus{
  outline:none; border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(30,70,52,.11); background:#fff;
}
input[aria-invalid="true"]{
  border-color:var(--danger); box-shadow:0 0 0 3px rgba(155,50,38,.09);
}

.money{ position:relative; }
.money .sym{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:17px; color:var(--ink-faint); pointer-events:none;
}
.money input{
  padding-left:32px; font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; letter-spacing:-.01em;
}

.err{ display:none; color:var(--danger); font-size:12.5px; margin-top:6px; }
.err.on{ display:block; }

.summary{
  background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; display:flex; justify-content:space-between;
  align-items:baseline; gap:14px;
}
.summary .lbl{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
.summary .ref{ font-size:12.5px; color:var(--ink-faint); margin-top:3px; word-break:break-word; }
.summary .amt{
  font-family:var(--serif); font-size:26px; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; white-space:nowrap;
}

button.pay{
  width:100%; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.04em;
  color:#F4F1E8; background:var(--forest); border:none; border-radius:var(--radius);
  padding:17px 20px; min-height:54px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
button.pay:hover:not(:disabled){
  background:var(--forest-lit); box-shadow:0 8px 20px -8px rgba(30,70,52,.5);
}
button.pay:active:not(:disabled){ transform:translateY(1px); }
button.pay:disabled{ opacity:.55; cursor:not-allowed; }
button.pay .spin{
  display:none; width:14px; height:14px;
  border:2px solid rgba(244,241,232,.35); border-top-color:#F4F1E8;
  border-radius:50%; animation:spin .7s linear infinite;
  vertical-align:-2px; margin-right:9px;
}
button.pay.busy .spin{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg) } }

.legal{ font-size:12px; color:var(--ink-faint); text-align:center; line-height:1.62; }
.legal strong{ color:var(--ink-soft); font-weight:600; }

.alert{
  display:none; border-left:3px solid var(--danger); background:#FBF0EE;
  padding:12px 14px; font-size:13.5px; color:#7A2A20;
  border-radius:0 var(--radius) var(--radius) 0;
}
.alert.on{ display:block; }

/* ═══════════ SUCCESS STATE ═══════════ */
.done{ display:none; text-align:center; }
.done.on{ display:block; animation:rise .5s var(--ease) both; }
.done .tick{
  width:60px; height:60px; margin:0 auto 22px; border-radius:50%;
  background:var(--forest); display:grid; place-items:center;
  animation:pop .45s var(--ease) .08s both;
}
.done h2{ font-family:var(--serif); font-weight:400; font-size:29px; }
.done > p{ color:var(--ink-soft); margin-top:10px; font-size:14.5px; }

.receipt{
  margin-top:26px; text-align:left; border:1px solid var(--line);
  border-radius:var(--radius); background:#FFFDF9; overflow:hidden;
}
.receipt div{ display:flex; justify-content:space-between; gap:14px; padding:12px 16px; font-size:13.5px; }
.receipt div + div{ border-top:1px solid var(--line); }
.receipt dt{ color:var(--ink-faint); flex:none; }
.receipt dd{ font-weight:600; font-variant-numeric:tabular-nums; text-align:right; word-break:break-word; }

.done .home{
  display:inline-block; margin-top:24px; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--forest);
  text-decoration:none; border-bottom:1px solid var(--line); padding:10px 0;
}
@keyframes pop{ from{ transform:scale(.6); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:900px){
  .shell{ grid-template-columns:1fr; min-height:0; }
  .brand{ padding:26px 22px 32px; padding-top:calc(26px + env(safe-area-inset-top)); }
  .brand-lede{ margin:30px 0 26px; }
  .brand-lede h1{ font-size:30px; }
  .brand-lede p{ font-size:14.5px; max-width:none; }
  .assurances li{ font-size:13px; }
  .panel{
    padding:34px 22px 56px;
    padding-bottom:calc(56px + env(safe-area-inset-bottom));
    align-items:flex-start;
  }
  .card h2{ font-size:26px; }
}
@media (max-width:460px){
  .row{ grid-template-columns:1fr; }
  .summary{ flex-direction:column; align-items:flex-start; gap:8px; }
  .summary .amt{ font-size:30px; }
}