/* /checkout/ — tinwell/checkout.html: one page, form left and order summary right. Builds on landing.css + shop.css;
 * the fields look like the old checkout modal's. */
.tw-shop{min-height:calc(100vh - 100px)}

/* Progress: Basket ✓ · Checkout · Done (the hero donation form's step bars) */
.tw-co-steps{list-style:none;margin:0 0 clamp(28px,3vw,40px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:520px}
.tw-co-steps li{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#5f6f67}
.tw-co-steps li span{height:4px;border-radius:2px;background:#dddddd;transition:background 280ms}
.tw-co-steps li.is-done span,.tw-co-steps li.is-on span{background:#2CA58D}
.tw-co-steps li.is-on{font-weight:600;color:#1c2b26}
.tw-co-steps a{color:#5f6f67;text-decoration:underline;text-underline-offset:2px}
.tw-co-steps a:hover{color:#1f7d6a}

.tw-co-note{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:640px;padding:clamp(28px,4vw,44px)}
.tw-co-note[hidden],.tw-co[hidden],.tw-co-done[hidden]{display:none}

.tw-co{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:clamp(20px,3vw,48px);align-items:start}
@media (max-width:920px){.tw-co{grid-template-columns:minmax(0,1fr)}.tw-co-side{order:-1}}

/* Form */
.tw-co-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.tw-co-form>.tw-t1{margin-bottom:8px}
.tw-co-sec{margin:0;min-width:0;padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:18px}
.tw-co-sec legend{font-family:var(--tw-display);float:left;width:100%;padding:0;display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:#1c2b26}
.tw-co-sec legend+*{clear:both}
.tw-co-n{flex:none;width:30px;height:30px;border-radius:50%;background:#1f7d6a;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.tw-co-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px 16px}
.tw-co-sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px 16px}
.tw-co-sec[hidden],.tw-co-sites[hidden],.tw-co-help[hidden]{display:none}
/* Several licences: a card per licence (website, organisation, contact) */
.tw-co-lics{display:flex;flex-direction:column;gap:14px}
.tw-co-lic{display:flex;flex-direction:column;gap:16px;padding:clamp(16px,2vw,22px);border:1px solid #dddddd;border-radius:10px;background:#f7f7f7}
.tw-co-lic-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tw-co-lic-h h3{font-family:var(--tw-display);margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#1c2b26}
.tw-co-lic-h .tw-link{font-size:14px}
.tw-co-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.tw-co-label{font-size:15px;font-weight:600}
.tw-co-help{margin:0;font-size:13px;line-height:1.5;color:#5f6f67}
.tw-co-help a{color:#1f7d6a;text-decoration:underline;text-underline-offset:2px}
.tw-co-input{width:100%;height:52px;padding:0 14px;border:1.5px solid #dddddd;border-radius:10px;background:#FFFFFF;color:#1c2b26;font:400 16px "Poppins",sans-serif;outline:0;transition:border-color 140ms}
.tw-co-input:focus{border-color:#1f7d6a}
.tw-co-input[aria-invalid="true"]{border-color:#B42318}
.tw-co-input::placeholder{color:#5f6f67}
.tw-co-cardf{position:relative;display:flex;flex-direction:column;gap:14px}
.tw-co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tw-co-opt{font-weight:400;color:#5f6f67}
.tw-co-select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#FFFFFF 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.5l5 5 5-5' fill='none' stroke='%2345524D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer}
.tw-co-se{display:flex;flex-direction:column;justify-content:center;padding:0 14px}
.tw-co-se>*{width:100%}
.tw-co-se.StripeElement--focus{border-color:#1f7d6a}
.tw-co-se.StripeElement--invalid{border-color:#B42318}
.tw-co-loading{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88);border-radius:10px;color:#5f6f67;font-size:15px}
.tw-co-loading[hidden]{display:none}
.tw-co-wallet{display:flex;flex-direction:column;gap:14px}
.tw-co-wallet[hidden]{display:none}
.tw-co-or{margin:0;display:flex;align-items:center;gap:12px;font-size:13px;color:#5f6f67}
.tw-co-or::before,.tw-co-or::after{content:"";flex:1;height:1px;background:#dddddd}
.tw-co-err{margin:0;padding:12px 14px;border-radius:10px;background:#FDECEA;color:#B42318;font-size:14px;line-height:1.45}
.tw-co-err[hidden]{display:none}
.tw-co-pay{width:100%;height:60px;border-radius:10px;font-size:17px;font-weight:600}
.tw-co-fine{margin:0;font-size:13px;line-height:1.5;color:#5f6f67;text-align:center;text-wrap:pretty}

/* Summary */
.tw-co-side{padding:0;overflow:hidden;box-shadow:0 30px 60px -40px rgba(28,43,38,.35)}
@media (min-width:921px){.tw-co-side{position:sticky;top:24px}}
.tw-co-sumbar{display:none}
.tw-co-sum-body{display:flex;flex-direction:column;gap:20px;padding:clamp(22px,2.6vw,30px)}
@media (max-width:920px){
  .tw-co-sumbar{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border:0;background:#FFFFFF;color:#1f7d6a;font:600 15px "Poppins",sans-serif;cursor:pointer}
  .tw-co-sumbar span::after{content:"▾";display:inline-block;margin-left:8px;transition:transform 200ms}
  .tw-co-sumbar[aria-expanded="true"] span::after{transform:rotate(180deg)}
  .tw-co-sumbar strong{font-family:var(--tw-display);color:#1c2b26;font-size:18px;font-weight:600}
  .tw-co-sum-body{display:none;border-top:1px solid #dddddd}
  .tw-co-sumbar[aria-expanded="true"]+.tw-co-sum-body{display:flex}
}
.tw-co-side-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tw-co-side-h h2{font-family:var(--tw-display);margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.tw-co-side-h a{font-size:14px;font-weight:600;color:#1f7d6a;text-decoration:underline;text-underline-offset:2px}
.tw-co-items{list-style:none;margin:0;padding:0 0 18px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid #dddddd}
.tw-co-items li{display:flex;align-items:center;gap:14px}
.tw-co-item-i{flex:none;width:44px;height:44px;border-radius:10px;background:#141a17;display:flex;align-items:center;justify-content:center}
.tw-co-item-i img{width:24px;height:24px}
.tw-co-item-i2{background:#E6F3EC;color:#1f7d6a;font-weight:700}
.tw-co-item-t{display:flex;flex-direction:column;min-width:0}
.tw-co-item-t strong{font-size:15px;font-weight:600}
.tw-co-item-t span{font-size:13px;color:#5f6f67}
.tw-co-item-p{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Order received */
.tw-co-done{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.tw-co-done-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:760px;padding:clamp(28px,4vw,48px)}
.tw-co-done-card .tw-t1:focus{outline:0}
.tw-co-tick{width:64px;height:64px;border-radius:50%;background:#1f7d6a;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700}
.tw-co-to{font-weight:600;color:#1c2b26;overflow-wrap:anywhere}
.tw-co-keys{align-self:stretch;display:flex;flex-direction:column;gap:10px}
.tw-co-keys[hidden]{display:none}
.tw-co-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:16px 18px;background:#f7f7f7;border:1px solid #dddddd;border-radius:10px}
.tw-co-key-l{flex-basis:100%;font-size:14px;font-weight:600;color:#52615a}
.tw-co-key code{font:700 18px "Poppins",sans-serif;color:#1c2b26;overflow-wrap:anywhere}
.tw-co-key .tw-link{margin-left:auto;font-size:14px}
.tw-co-later[hidden],.tw-co-onb[hidden]{display:none}
.tw-co-later,.tw-co-onb{margin:0;font-size:16px;line-height:1.55;color:#52615a}
.tw-co-onb{padding:12px 14px;border-radius:10px;background:#E6F3EC;color:#1f7d6a}
.tw-co-next{display:flex;flex-direction:column;gap:32px}