/* Rio Bright Diamond — checkout (bank transfer + slip upload).
   Loads after rio.css and reuses its tokens, buttons, header and sheets.
   Desktop: form column + sticky summary. Mobile: one column, sticky total bar. */

.co{padding-block:clamp(22px,4vw,48px) clamp(56px,8vw,96px);background:linear-gradient(180deg,var(--pearl),var(--porcelain) 420px)}
.co-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.co-top h1{font:600 clamp(26px,3.4vw,38px)/1.25 var(--thai);letter-spacing:-.015em;margin-top:10px;max-width:20em}

/* step tracker */
.co-steps{display:flex;gap:6px;list-style:none;margin:0;padding:5px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.co-steps li{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;font-size:14px;color:var(--ink-2);transition:background-color .25s,color .25s}
.co-steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pearl);font:600 12px var(--mono);font-style:normal;transition:background-color .25s,color .25s}
.co-steps li.on{background:var(--blush);color:var(--ink)}
.co-steps li.on i{background:var(--berry);color:var(--on-berry)}
.co-steps li.done i{background:var(--ink);color:var(--porcelain);font-size:0}
.co-steps li.done i::before{content:"✓";font-size:12px}

.co-demo{margin-bottom:18px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--foil) 16%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--foil) 45%,transparent);font-size:14px;line-height:1.55;color:var(--ink)}
.co-demo b{color:var(--foil-ink);margin-right:6px}

/* layout */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px 28px;align-items:start}
.co-grid > .co-card{grid-column:1}
.co-sum{grid-column:2;grid-row:1 / span 4;position:sticky;top:92px}

/* cards */
.co-card{background:var(--card);border-radius:22px;padding:clamp(18px,2.4vw,28px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);scroll-margin-top:90px}
.co-card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.co-card-head h2{font:600 20px/1.3 var(--thai)}
.co-card-head .n{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--pearl);color:var(--berry);font:600 14px var(--mono);transition:background-color .25s,color .25s}
.co-card-head .ok{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--line-green);color:#fff;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.co-card.done .co-card-head .ok{transform:scale(1)}
.co-card.done .co-card-head .n{background:var(--ink);color:var(--porcelain)}
.co-note{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.co-link{border:0;background:none;padding:0;font:inherit;color:var(--berry);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 1 · sets */
.co-sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.co-set{position:relative;display:grid;gap:10px;padding:12px;border-radius:16px;background:var(--porcelain);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .2s,background-color .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.co-set:hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.co-set input{position:absolute;opacity:0;pointer-events:none}
.co-set img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:11px;background:var(--pearl)}
.co-set .t{display:grid;gap:2px}
.co-set b{font-size:16px;font-weight:600}
.co-set small{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.co-set strong{font:600 18px var(--display);font-variant-numeric:tabular-nums}
.co-set:has(input:checked){background:var(--card);box-shadow:inset 0 0 0 2px var(--berry),0 14px 28px -18px color-mix(in srgb,var(--berry) 80%,transparent)}
.co-set:has(input:checked)::after{content:"";position:absolute;top:18px;right:18px;width:22px;height:22px;border-radius:50%;background:var(--berry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:0 0 0 3px var(--card)}
.co-set:has(input:focus-visible){outline:2px solid var(--berry);outline-offset:3px}

/* 2 · fields */
.co-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.f{display:grid;gap:6px;align-content:start;min-width:0}
.f-full{grid-column:1 / -1}
.f label{font-size:14px;font-weight:600;color:var(--ink)}
.f label em{font-style:normal;font-weight:400;color:var(--ink-2);margin-left:4px;font-size:13px}
.f input,.f select,.f textarea,.co-paste textarea{width:100%;min-height:52px;padding:13px 14px;border:0;border-radius:12px;background:var(--porcelain);color:var(--ink);font:400 16px/1.45 var(--thai);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .15s,background-color .15s;-webkit-appearance:none;appearance:none}
.f textarea,.co-paste textarea{resize:vertical;min-height:76px}
.f select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236D5763' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;cursor:pointer}
.f input::placeholder,.f textarea::placeholder,.co-paste textarea::placeholder{color:color-mix(in srgb,var(--ink-2) 70%,transparent)}
.f input:hover,.f select:hover,.f textarea:hover{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.f input:focus,.f select:focus,.f textarea:focus,.co-paste textarea:focus{outline:0;background:var(--card);box-shadow:inset 0 0 0 2px var(--berry),0 0 0 4px color-mix(in srgb,var(--berry) 14%,transparent)}
.f.bad input,.f.bad select,.f.bad textarea{box-shadow:inset 0 0 0 2px #C4314B;background:color-mix(in srgb,#C4314B 5%,var(--card))}
.f.good input,.f.good select,.f.good textarea{background:var(--card)}
.f.flash input,.f.flash select,.f.flash textarea{animation:flash 1.2s ease}
@keyframes flash{0%{box-shadow:inset 0 0 0 2px var(--line-green),0 0 0 5px color-mix(in srgb,var(--line-green) 22%,transparent)}}
.err{min-height:0;font-size:13px;line-height:1.4;color:#C4314B}
.err:empty{display:none}
.err::before{content:"! ";font-weight:700}
.f-post{grid-column:1}
.f-prov{grid-column:2}
.co-more{margin-top:2px}
.co-more summary{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--berry);cursor:pointer;list-style:none;padding:6px 0}
.co-more summary::-webkit-details-marker{display:none}
.co-more summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--pearl);font-size:16px;line-height:1}
.co-more[open] summary::before{content:"−"}
.co-more[open] textarea{margin-top:6px}

/* smart paste */
.co-paste{margin-bottom:18px;border-radius:14px;background:var(--pearl);overflow:hidden}
.co-paste summary{display:flex;align-items:center;gap:10px;padding:13px 14px;font-size:14px;font-weight:600;line-height:1.45;cursor:pointer;list-style:none;color:var(--ink)}
.co-paste summary::-webkit-details-marker{display:none}
.co-paste summary svg{flex:none;color:var(--berry)}
.co-paste summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.co-paste[open] summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.co-paste-body{display:grid;gap:10px;padding:0 14px 14px}
.co-paste-body .btn{justify-self:start}
.co-paste-msg{font-size:13px;color:var(--ink-2)}
.co-paste-msg:empty{display:none}

/* 3 · bank card */
.bank{position:relative;display:grid;gap:4px;padding:20px 22px;border-radius:20px;color:#F7EEF2;background:radial-gradient(120% 140% at 100% 0%,#4A2436 0%,#2B1320 55%,#1E0D17 100%);box-shadow:0 24px 44px -26px rgba(43,19,32,.75);overflow:hidden;isolation:isolate}
.bank::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);pointer-events:none}
.bank-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bank-top b{display:block;font-size:16px;font-weight:600}
.bank-top small{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#C9B3BE}
.bank-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#138F2D;color:#fff;font:700 20px var(--display)}
.bank-row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.1)}
.bank-row .lbl{font-size:13px;color:#C9B3BE}
.bank-row .acc{font:500 clamp(20px,2.6vw,25px)/1.2 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.bank-row .name{font-size:15px;font-weight:600;line-height:1.45}
.bank-row .amt{font:600 clamp(21px,2.6vw,26px)/1.2 var(--display);color:#F2B6C6;font-variant-numeric:tabular-nums}
.bank-copy{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font:600 13px var(--thai);cursor:pointer;transition:background-color .2s}
.bank-copy:hover{background:rgba(255,255,255,.2)}
.bank-copy.copied{background:var(--line-green)}

/* slip drop zone */
.drop{margin-top:18px}
.drop-zone{display:grid;justify-items:center;gap:6px;padding:28px 18px;border-radius:18px;border:2px dashed var(--line-2);background:var(--porcelain);text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}
.drop-zone:hover,.drop.over .drop-zone{border-color:var(--berry);background:color-mix(in srgb,var(--blush) 55%,var(--card))}
.drop.over .drop-zone{transform:scale(1.01)}
.drop-zone b{font-size:16px;font-weight:600;color:var(--ink)}
.drop-zone small{font-size:13px;color:var(--ink-2)}
.drop-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--berry);color:var(--on-berry);margin-bottom:6px;box-shadow:0 12px 24px -12px color-mix(in srgb,var(--berry) 90%,transparent)}
#f-slip:focus-visible + .drop-zone{outline:2px solid var(--berry);outline-offset:3px}
.drop.bad .drop-zone{border-color:#C4314B;background:color-mix(in srgb,#C4314B 5%,var(--card))}
.only-fine{display:none}
@media (hover:hover) and (pointer:fine){.only-fine{display:block}.only-touch{display:none}}
.drop-file{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--porcelain);box-shadow:inset 0 0 0 1.5px var(--line-green)}
.drop-file .thumb{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;background:var(--pearl);color:var(--ink-2);overflow:hidden}
.drop-file .thumb img{width:100%;height:100%;object-fit:cover}
.drop-file .meta{display:grid;gap:2px;min-width:0}
.drop-file .meta b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-file .meta small{font-size:12.5px;color:#138F2D}
.drop-file .btn-sm{--h:38px;padding:0 12px;font-size:14px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* summary */
.co-sum{display:grid;gap:16px;padding:22px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.co-sum h2{font:600 18px var(--thai)}
.sum-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px}
.sum-item img{width:64px;height:64px;border-radius:14px;object-fit:cover;background:var(--pearl)}
.sum-item b{display:block;font-size:15px;font-weight:600}
.sum-item small{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.sum-item strong{font:600 16px var(--display);font-variant-numeric:tabular-nums}
.sum-rows{display:grid;gap:8px;margin:0;padding:14px 0 0;border-top:1px solid var(--line)}
.sum-rows div{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px}
.sum-rows dt{color:var(--ink-2)}
.sum-rows dd{margin:0;font-variant-numeric:tabular-nums}
.sum-rows .free{color:#138F2D;font-weight:600}
.sum-rows .total{padding-top:12px;margin-top:4px;border-top:1px dashed var(--line-2)}
.sum-rows .total dt{color:var(--ink);font-weight:600;font-size:16px}
.sum-rows .total dd{font:600 28px var(--display);letter-spacing:-.01em;color:var(--berry)}
.co-submit{width:100%;justify-content:space-between;padding-right:14px}
.co-submit[disabled],.co-bar .btn[disabled]{opacity:.75;cursor:progress}
.co-submit.loading .go{animation:spin 1s linear infinite}
.co-submit.loading .go svg{display:none}
.co-submit.loading .go::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.co-progress{height:4px;border-radius:4px;background:var(--pearl);overflow:hidden;margin-top:-8px}
.co-progress i{display:block;height:100%;width:0;background:var(--berry);transition:width .2s}
.co-alert{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#C4314B 9%,var(--card));color:#A3243B;font-size:14px;line-height:1.5;box-shadow:inset 0 0 0 1px color-mix(in srgb,#C4314B 30%,transparent)}
.sum-trust{display:grid;gap:10px;list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line)}
.sum-trust li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.sum-trust svg{flex:none;color:var(--berry)}
.sum-privacy{font-size:12px;line-height:1.5;color:var(--ink-2)}

/* mobile total bar */
.co-bar{display:none}

/* done */
.co-done{max-width:860px;margin-inline:auto;text-align:center;outline:0;padding-top:clamp(8px,3vw,32px)}
.done-badge{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:var(--line-green);color:#fff;box-shadow:0 0 0 10px color-mix(in srgb,var(--line-green) 16%,transparent)}
@media (prefers-reduced-motion:no-preference){.co-done:not([hidden]) .done-badge{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.4);opacity:0}}}
.co-done h1{font:600 clamp(26px,3.6vw,40px)/1.25 var(--thai);margin-top:10px}
.done-no{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;font-size:16px;color:var(--ink-2)}
.done-no b{font:600 20px var(--mono);color:var(--ink)}
.done-no .bank-copy{background:var(--pearl);color:var(--ink)}
.done-no .bank-copy.copied{background:var(--line-green);color:#fff}
.done-status{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--foil) 18%,var(--card));color:var(--foil-ink);font-size:14px;font-weight:600}
.done-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--foil)}
.done-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;text-align:left}
.done-card,.done-next{background:var(--card);border-radius:20px;padding:22px;box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.done-card h2{font:500 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--foil-ink);margin-bottom:6px}
.done-card h2 + p{margin-top:0}
.done-card p{font-size:15px;line-height:1.6;margin-bottom:14px}
.done-card p:last-child{margin-bottom:0;color:var(--ink-2)}
.done-next{list-style:none;margin:0;display:grid;gap:16px;counter-reset:n}
.done-next li{display:grid;grid-template-columns:32px 1fr;gap:2px 12px;counter-increment:n}
.done-next li::before{content:counter(n);grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--pearl);color:var(--berry);font:600 14px var(--mono)}
.done-next li:first-child::before{background:var(--berry);color:var(--on-berry)}
.done-next b{font-size:15.5px;font-weight:600}
.done-next span{font-size:13.5px;color:var(--ink-2)}
.done-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}

/* checkout header: logo + back + chat only */
.hdr-co .co-back{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:8px 10px;border-radius:10px}
.hdr-co .co-back:hover{color:var(--ink);background:var(--pearl)}
.hdr-co .co-secure{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);margin-right:4px}
.foot-co{margin-top:0;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));font-size:12.5px;line-height:1.65;text-align:center;color:color-mix(in srgb,var(--on-deep) 72%,transparent)}
.foot-co p + p{margin-top:6px}
.co [hidden]{display:none!important}

/* ---------- tablet ---------- */
@media (max-width:1020px){
  .co-grid{grid-template-columns:minmax(0,1fr)}
  .co-grid > .co-card,.co-sum{grid-column:1;grid-row:auto}
  .co-sum{position:static}
  .co-steps{width:100%}
  .co-steps li{flex:1;justify-content:center}
}

/* ---------- phone ---------- */
@media (max-width:720px){
  .co{padding-top:18px;padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .co-top{gap:14px;margin-bottom:16px}
  .co-top h1{font-size:23px;margin-top:6px}
  .co-steps{padding:4px;gap:2px}
  .co-steps li{flex-direction:column;gap:4px;padding:7px 4px;border-radius:14px;font-size:11.5px;line-height:1.25;text-align:center}
  .co-grid{gap:12px}
  .co-card{border-radius:20px;padding:18px 16px}
  .co-card-head{margin-bottom:14px}
  .co-card-head h2{font-size:18px}
  /* sets become compact rows: easier to compare with a thumb */
  .co-sets{grid-template-columns:minmax(0,1fr);gap:8px}
  .co-set{grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px 10px 10px}
  .co-set img{width:52px;height:52px;border-radius:10px}
  .co-set:has(input:checked)::after{top:6px;left:48px;right:auto;width:20px;height:20px;background-size:11px}
  .co-fields{gap:12px 10px}
  .co-fields > .f-contact{grid-column:1 / -1}
  .f-post{grid-column:1}
  .f-prov{grid-column:2}
  .bank{padding:16px 16px 12px;border-radius:18px}
  .bank-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0}
  .bank-row .lbl{grid-column:1 / -1}
  .bank-row .acc{font-size:22px}
  .drop-zone{padding:24px 16px}
  .drop-file{grid-template-columns:56px minmax(0,1fr) auto;gap:10px}
  .drop-file .thumb{width:56px;height:56px}
  .drop-file .btn-sm{display:none}
  .co-sum{padding:18px 16px;border-radius:20px}
  .done-grid{grid-template-columns:minmax(0,1fr)}
  .done-cta .btn{width:100%}
  .hdr-co .co-back span,.hdr-co .co-secure{display:none}
  .hdr-co .hdr-cta .chat-btn{display:inline-grid}

  .co-bar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--porcelain) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transition:transform .3s ease}
  .co-bar.away{transform:translateY(115%)}
  .co-bar .info{margin-right:auto;display:grid;line-height:1.2}
  .co-bar .info small{font-size:12px;color:var(--ink-2)}
  .co-bar .info b{font:600 21px var(--display);color:var(--berry);font-variant-numeric:tabular-nums}
  .co-bar .btn{--h:50px;padding:0 20px}
  html.locked .co-bar{visibility:hidden}
}
@media (max-width:380px){
  .co-set small{font-size:12px}
  .bank-row .acc{font-size:20px}
}
.hdr-co .hdr-cta{margin-left:auto}
.co-bar[hidden]{display:none!important}