/* Custom code goes here - paste your css code below in line 10 */

a.product-flags-plist span.product-flag.new,
#product #content .product-flags .product-flag.new,
a.product-flags-plist span.product-flag.pack,
#product #content .product-flags .product-flag.pack {
color: #000;
}

/* veld-styling (inputs, selects, textarea) */
#checkout form input,
#checkout form select,
#checkout form textarea,
.checkout form input,
.checkout form select,
.checkout form textarea,
.js-address-form input,
.js-address-form select,
.js-address-form textarea {
  height: 48px !important;
  padding: 10px 14px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 10px !important;
  background: #fff !important;
  transition: border-color .2s, box-shadow .2s !important;
}

/* labels & marges */
#checkout .form-group label,
.checkout .form-group label,
.js-address-form .form-group label {
  font-weight: 600 !important;
  color: #333 !important;
}
#checkout .form-group,
.checkout .form-group,
.js-address-form .form-group {
  margin-bottom: 14px !important;
}

/* focus */
#checkout input:focus, #checkout select:focus, #checkout textarea:focus,
.checkout input:focus, .checkout select:focus, .checkout textarea:focus {
  border-color: #2fb5d2 !important;
  box-shadow: 0 0 0 3px rgba(47,181,210,.15) !important;
  outline: none !important;
}

/* fout */
#checkout .form-control.is-invalid,
.checkout .form-control.is-invalid {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231,76,60,.15) !important;
}
#checkout .form-error, .checkout .form-error { color:#e74c3c !important; }

/* knoppen */
#checkout .btn, #checkout .continue, #checkout .btn-primary,
.checkout .btn, .checkout .continue, .checkout .btn-primary {
  height: 48px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* desktop: postcode/stad naast elkaar als het kan */
@media (min-width: 992px) {
  #checkout .js-address-form .form-fields,
  .checkout .js-address-form .form-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}