/* =========================================================
   CHECKOUT.CSS
========================================================= */

.checkout-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items:start;
  margin-top: 14px;
}

.checkout-form label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  color:#111827;
  margin-bottom: 10px;
}

.checkout-form input,
.checkout-form textarea{
  width:100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d7dde6;
  background:#fff;
  outline: none;
}

.checkout-form textarea{ resize: vertical; min-height: 110px; }

.checkout-form input:focus,
.checkout-form textarea:focus{
  border-color:#9aa4b2;
}

.checkout-form .row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.company-toggle{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  background:#fff;
}

.chk{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  margin: 0;
}

.company-fields{
  padding: 12px;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  background:#fff;
  margin-bottom: 12px;
}

/* Rezime desno */
.sum-row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:center;
  padding: 10px 0;
  border-bottom: 1px solid #eef0f3;
}

.sum-left{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 0;
}

.sum-thumb{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #eef0f3;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex: 0 0 auto;
}

.sum-thumb img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

@media (max-width: 980px){
  .checkout-grid{
    grid-template-columns: 1fr;
  }
}
/* ===== CHECKOUT RESPONSIVE ===== */
@media (max-width: 900px){
  .checkout-grid{ display:block !important; }
  .checkout-grid > .card{ margin-bottom:12px; }
}

@media (max-width: 520px){
  .row2{ display:block !important; }
  .row2 > *{ margin-bottom:10px; }
  .btn{ width:100%; }
}
