/* Layout */
.checkout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  max-width:1100px;
  margin:20px auto;
  padding:20px;
}
.checkout-left h2{ margin:18px 0 8px }
.checkout-left h3{ margin:22px 0 8px }

label{ display:block; margin-bottom:12px; font-weight:600 }
label input, select{
  width:100%;
  padding:12px 14px;
  border:1px solid #d9dbe0;
  border-radius:10px;
  font:inherit;
  background:#fff;
}
.row{ display:flex; gap:10px; align-items:center; font-weight:400 }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.note{ background:#f3f5f7; border:1px solid #e6e8ec; border-radius:12px; padding:14px }

/* Sidebar (rechter kolom) */
.checkout-right{
  background:#fff;
  border:1px solid #e7e7ea;
  border-radius:14px;
  padding:16px;
  height:max-content;
  position:sticky; top:16px;
}
.cart-item{
  display:flex; gap:12px; align-items:center; padding:8px 0;
}
.cart-item img{
  width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid #eee;
}
.cart-info{ flex:1 }
.title{ font-weight:700 }
.muted{ color:#6b7280 }
.small{ font-size:.9rem }
.price{ font-weight:600 }

.discount{ display:flex; gap:8px; margin-top:10px }
.discount input{ flex:1 }
.discount button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #d9dbe0;
  background:#f6f7f9;
  cursor:pointer;
}

.totals{ margin-top:10px }
.totals>div{
  display:flex; justify-content:space-between; align-items:center; margin:8px 0;
}
.totals hr{ border:none; border-top:1px solid #eee; margin:10px 0 }
.total{ font-size:1.2rem; font-weight:800 }

.pay-btn{
  width:100%; padding:14px; border-radius:12px;
  border:none; background:#111; color:#fff; font-weight:700; cursor:pointer;
}

/* Focus styles */
input:focus, select:focus{
  outline:2px solid #9dd1ff; border-color:#9dd1ff;
}

/* Qty controls */
.qtywrap{
  display:inline-flex; align-items:center;
  border:1px solid #d9dbe0; border-radius:10px; overflow:hidden; margin-left:6px;
}
.qtywrap button{ all:unset; padding:6px 10px; cursor:pointer }
.qtywrap input{
  width:56px; padding:6px 8px; border:0; text-align:center; font:inherit; -moz-appearance:textfield;
}
.qtywrap button:hover{ background:#f3f4f6 }
.qtywrap input::-webkit-outer-spin-button,
.qtywrap input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* Navbar cart badge (inline styles verwijderd uit HTML) */
.cart{ position:relative; display:inline-block; margin-left:16px; line-height:0 }
.cart [data-cart-count]{
  position:absolute; top:-6px; right:-10px;
  min-width:20px; height:20px; padding:0 6px;
  font:600 12px/20px system-ui, sans-serif;
  text-align:center; color:#fff; background:#e11d48;
  border-radius:999px; box-shadow:0 0 0 2px #fff;
  display:none;
}

/* Responsive */
@media (max-width:900px){
  .checkout{ grid-template-columns:1fr }
}





/* --- Navbar gelijk aan order --- */
.navbar{
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* zelfde link spacing en kleur als order */
.navbar .menu a{
  margin-left: 16px;
  text-decoration: none;
  color: #111827;
}

/* Cart-link: geen rode button-stijl (alleen icoon) */
.menu .cart{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.menu .cart:hover{
  background: transparent !important;
  transform: none !important;
}

/* Badge blijft zoals eerder gedefinieerd */
.cart{ position:relative; display:inline-block; margin-left:16px; line-height:0 }
.cart [data-cart-count]{
  position:absolute; top:-6px; right:-10px;
  min-width:20px; height:20px; padding:0 6px;
  font:600 12px/20px system-ui, sans-serif;
  text-align:center; color:#fff; background:#e11d48;
  border-radius:999px; box-shadow:0 0 0 2px #fff;
  display:none;
}