/* ============================================================
   CHECKOUT — tampilan halaman checkout (tema terang)
   ============================================================ */

.checkout-body{min-height:100vh}

.co-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(20,40,95,.08)}
.co-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px}
.co-back{font-weight:700;font-size:.92rem;color:var(--navy-700);white-space:nowrap}
.co-back:hover{color:#0a9167}

.co-main{padding:clamp(2rem,6vw,3.5rem) 0 clamp(3rem,7vw,5rem)}
.co-title{margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.co-title h1{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:800;color:var(--navy-900);margin:.6rem 0 .4rem}
.co-title p{color:var(--muted);max-width:600px}

.co-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:start}
.co-card{padding:clamp(1.3rem,3.4vw,1.9rem);border-radius:20px}

/* form */
.co-form{display:flex;flex-direction:column;gap:1.05rem}
.co-form h2,.co-summary h2{font-size:1.05rem;font-weight:800;color:var(--navy-900);margin:0;display:flex;align-items:center;gap:.45rem}
.co-form h2:not(:first-child){margin-top:.35rem;padding-top:1rem;border-top:1px dashed rgba(20,40,95,.15)}

.co-bank{
  background:linear-gradient(135deg,rgba(79,126,231,.1),rgba(11,170,126,.06));
  border:1px solid rgba(79,126,231,.3);border-radius:14px;padding:1rem 1.15rem;
}
.co-bank-name{font-weight:800;font-size:1rem;color:var(--navy-800)}
.co-bank p{margin:.15rem 0;color:var(--muted);font-size:.94rem}
.co-bank strong{color:var(--navy-900)}
.co-hint{color:var(--muted-2);font-size:.87rem;margin:0;line-height:1.55}

.co-field{display:flex;flex-direction:column;gap:.4rem}
.co-field label{font-weight:700;font-size:.92rem;color:var(--navy-800)}
.co-field label em{color:#d42a1a;font-style:normal}
.co-field label span{color:var(--muted-2);font-weight:500;font-size:.84rem}
.co-field input,.co-field textarea{
  font:inherit;font-size:.95rem;color:var(--ink);
  background:#f6f9ff;border:1px solid rgba(20,40,95,.18);
  border-radius:12px;padding:.75rem .95rem;outline:none;width:100%;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.co-field textarea{resize:vertical;min-height:64px}
.co-field input:focus,.co-field textarea:focus{border-color:rgba(11,170,126,.6);background:#fff;box-shadow:0 0 0 4px rgba(11,170,126,.12)}
.co-field input::placeholder,.co-field textarea::placeholder{color:#9aa6c2}
.co-field.err input,.co-field.err textarea{border-color:#d42a1a;background:#fff7f7}
.co-err{color:#d42a1a;font-size:.82rem;font-weight:600}

.co-upload{
  display:flex;align-items:center;gap:.8rem;cursor:pointer;
  border:1.5px dashed rgba(20,40,95,.25);border-radius:12px;
  background:rgba(255,255,255,.5);padding:.85rem .95rem;
  transition:border-color .2s,background .2s;
}
.co-upload:hover{border-color:rgba(11,170,126,.55);background:rgba(11,170,126,.05)}
.co-upload-ic{font-size:1.4rem}
.co-upload-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.9rem}
.co-upload-btn{flex:none;font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(135deg,#19e3a4,#0ab383);border-radius:999px;padding:.5rem 1rem}

.co-submit{margin-top:.3rem}
.co-footnote{color:var(--muted-2);font-size:.85rem;margin:0;text-align:center}

/* summary */
.co-summary{position:relative;display:flex;flex-direction:column;gap:.9rem;background:linear-gradient(165deg,rgba(255,255,255,.98),rgba(240,248,255,.85))}
.co-summary::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,#19e3a4,#4f7ee7,#f0b429)}
.co-prod{display:flex;gap:.85rem;align-items:center}
.co-prod-ic{flex:none;width:50px;height:50px;display:grid;place-items:center;font-size:1.5rem;border-radius:14px;background:rgba(21,45,100,.06);border:1px solid rgba(21,45,100,.12)}
.co-prod-info{display:flex;flex-direction:column;min-width:0}
.co-prod-info strong{font-size:.98rem;color:var(--navy-900)}
.co-prod-info span{font-weight:800;color:#0a9167}
.co-prod-info small{color:var(--muted-2);font-size:.8rem}

.co-qty{display:inline-flex;align-items:center;gap:.1rem;align-self:flex-start;border:1px solid rgba(20,40,95,.18);border-radius:999px;overflow:hidden;background:#fff}
.co-qty button{width:38px;height:38px;display:grid;place-items:center;font-size:1.25rem;font-weight:700;color:var(--navy-800);background:#fff;transition:background .2s}
.co-qty button:hover{background:rgba(11,170,126,.12);color:#067a5c}
.co-qty span{min-width:44px;text-align:center;font-weight:800;color:var(--navy-900)}

.co-hapus{align-self:flex-start;font-size:.87rem;font-weight:700;color:#d42a1a;background:rgba(212,42,26,.06);border:1px solid rgba(212,42,26,.2);border-radius:999px;padding:.45rem 1rem;transition:background .2s}
.co-hapus:hover{background:rgba(212,42,26,.14)}

.co-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px dashed rgba(20,40,95,.2)}
.co-total span{font-weight:700;color:var(--ink-soft)}
.co-total strong{font-size:1.4rem;color:var(--navy-900)}

.co-guarantee{display:flex;flex-direction:column;gap:.4rem;background:rgba(11,170,126,.06);border:1px solid rgba(11,170,126,.25);border-radius:12px;padding:.85rem 1rem}
.co-guarantee p{margin:0;font-size:.84rem;color:var(--ink-soft);font-weight:600}

.co-empty{text-align:center;padding:2.5rem 1.5rem}
.co-empty p{font-size:1.1rem;font-weight:700;color:var(--navy-800);margin-bottom:1.2rem}
.co-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;
  max-width:min(560px,92vw);text-align:center;
  background:rgba(212,42,26,.95);color:#fff;font-size:.9rem;font-weight:700;
  border-radius:14px;padding:.8rem 1.1rem;box-shadow:0 18px 44px -14px rgba(0,0,0,.5);
}
.co-toast.ok{background:rgba(10,145,103,.96)}
.co-toast[hidden]{display:none}

@media (min-width:960px){
  .co-grid{grid-template-columns:1.55fr .85fr;gap:1.6rem}
  .co-summary{position:sticky;top:86px}
}