/* Container hergebruikt je 12-kolom grid */
.form-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

/* Labels */
label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
}

/* Inputs, Selects en Textareas */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
button,
textarea {
  padding: 12px 15px;
  border: 2px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  line-height: 48px;
}


input[type="checkbox"] {
	appearance: none;
	display: inline-block;
	vertical-align: middle;
    width: 24px;
    height: 24px;
	line-height: 50px;
	border-radius: 6px;
	background-color: transparent;
	background-position: center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
	margin-right: 8px;
	border: 2px solid var(--border);
}
input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='rgb(255, 255, 255)' stroke='rgb(255, 255, 255)'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
	background-color: var(--accent);
	border: 2px solid var(--accent);
}
input[type="checkbox"] + label {
	line-height: 50px;
	cursor:pointer;
}

textarea {
	resize: none;
	height: auto;
	line-height: 1.5;
}

/* fix lightbox */
.fslightboxb {
	padding: 0;
}

/* Focus state: geeft de gebruiker feedback */
input:focus, 
select:focus, 
textarea:focus {
  outline: none;
  border-color: var(--accent);
  /*box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);*/
}

/* Checkbox styling */
.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.checkbox-group input {
  width: auto;
}

/* De Button */
button, .button {
	padding: 12px 24px;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}


.btn-submit, .btn-cart {
	background-color: var(--accent);
	color: white;
}
.btn-addtocart, .btn-gold {
	background-color: var(--accent-gold);
	color: var(--accent);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.btn-addtocart:hover, .btn-gold:hover {
	background-color: #FFBE00;
}

.btn-submit:hover, .btn-cart:hover {
  background-color: var(--accent-hover);
}

form label.required::after {
	content: ' *';
	color: red;
}

.fieldmessage {
	color: red;
}
.haserror {
	border-color: red !important;
}

.message { padding: 10px; margin-bottom: 20px; border-radius: 5px; }
.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.warning { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }


#shippingsameaddress:checked ~ #shippingaddressform {
	display: none;
}