:root{
  --primary-dark:color-mix(in srgb, var(--primary) 82%, black);
  --border:color-mix(in srgb, var(--primary) 16%, white);
  --border-2:color-mix(in srgb, var(--primary) 22%, white);
  --soft-bg:color-mix(in srgb, var(--primary) 6%, white);
  --soft-bg-2:color-mix(in srgb, var(--primary) 10%, white);
}

body{
  background:#fafafa;
}

.section{
  padding:80px 0;
}

.checkout-layout{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:40px;
  align-items:start;
}

.checkout-title{
  font-size:40px;
  font-weight:800;
  margin-bottom:28px;
  color:var(--primary-dark);
}

.checkout-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  padding:24px;
  box-shadow:0 10px 30px rgba(89,63,214,0.06);
  margin-bottom:18px;
}

.checkout-error-box{
  border-color:#ffb3b3;
  color:#b00020;
}

.card-title{
  font-size:22px;
  font-weight:800;
  margin-bottom:18px;
  color:var(--site-text-color);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-group.full{
  grid-column:1 / -1;
}

label{
  font-size:14px;
  font-weight:700;
  color:#555;
}

input,
select,
textarea{
  width:100%;
  height:52px;
  border:1px solid var(--border-2);
  border-radius:12px;
  padding:0 14px;
  font-size:15px;
  background:#fff;
  box-sizing:border-box;
  color:var(--site-text-color);
}

textarea{
  height:110px;
  padding:14px 16px;
  resize:none;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 10%, white);
  outline:none;
}

select:disabled{
  background:#f5f5f5;
  color:#888;
  cursor:not-allowed;
}

.checkout-note{
  font-size:14px;
  color:#777;
  margin-top:10px;
}

.summary-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  padding:24px;
  box-shadow:0 10px 30px rgba(89,63,214,0.06);
  position:sticky;
  top:120px;
}

.summary-title{
  font-size:24px;
  font-weight:800;
  margin-bottom:20px;
  color:var(--primary-dark);
}

.summary-item{
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:14px;
  align-items:center;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid #eee;
}

.summary-item img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:12px;
  background:var(--soft-bg);
}

.summary-item-name{
  font-size:16px;
  font-weight:800;
  margin-bottom:4px;
  color:var(--site-text-color);
}

.summary-item-variant{
  font-size:13px;
  color:#777;
}

.summary-item-price{
  font-size:16px;
  font-weight:800;
  color:var(--site-text-color);
}

.summary-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
  font-size:16px;
  color:var(--site-text-color);
}

.summary-row.total{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #eee;
  font-size:20px;
  font-weight:800;
}

.payment-box{
  margin-top:18px;
  background:var(--soft-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  font-size:14px;
  color:#555;
  line-height:1.6;
}

.payment-box-title{
  font-weight:800;
  font-size:16px;
  margin-bottom:12px;
  color:var(--primary-dark);
}

.payment-method-list{
  display:grid;
  gap:12px;
}

.payment-method-option{
  border:1px solid var(--border-2);
  border-radius:16px;
  padding:14px 16px;
  background:#fff;
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  transition:.2s;
}

.payment-method-option:hover{
  border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 6%, white);
}

.payment-method-option input{
  width:18px;
  height:18px;
  margin-top:2px;
}

.payment-method-title{
  font-size:15px;
  font-weight:800;
  color:var(--site-text-color);
  margin-bottom:4px;
}

.payment-method-desc{
  font-size:13px;
  color:#777;
  line-height:1.5;
}

.bank-transfer-box{
  margin-top:14px;
  padding:14px;
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:12px;
  white-space:pre-line;
}

.checkout-btn{
  width:100%;
  height:58px;
  margin-top:18px;
  border:none;
  border-radius:16px;
  background:var(--primary);
  color:#fff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 12px 25px color-mix(in srgb, var(--primary) 35%, transparent);
}

.checkout-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-1px);
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:#666;
  font-weight:700;
  text-decoration:none;
}

.security-note{
  margin-top:14px;
  font-size:13px;
  color:#777;
  text-align:center;
}

@media(max-width:950px){
  .checkout-layout{
    grid-template-columns:1fr;
  }

  .summary-box{
    position:static;
  }
}

@media(max-width:700px){
  .checkout-title{
    font-size:30px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .summary-item{
    grid-template-columns:60px 1fr;
  }

  .summary-item-price{
    grid-column:2;
  }
}