/* Droomtextiel Checkout Page */
.dt-checkout{--dt-max:1600px}
.dt-checkout__container{max-width:var(--dt-max);margin:0 auto;padding:24px 16px}
.dt-checkout__title{font-size:20px;font-weight:600;color:var(--color-primary,#84B082);margin:0 0 12px}

/* Grid */
.dt-checkout__grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.dt-checkout__summary{border:1px solid rgba(0,0,0,.06);border-radius:8px;padding:16px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.dt-checkout__details .woocommerce-billing-fields__field-wrapper,
.dt-checkout__details .woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Make street / number / suffix align nicely */
/* Our custom field grids */
.dt-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dt-fields .dt-field{display:flex;flex-direction:column}
.dt-fields .dt-field label{font-size:13px;margin:0 0 6px;color:#333}

/* Layout specifics for street / number / suffix */
.dt-fields--billing #billing_address_1_field, .dt-fields--shipping #shipping_address_1_field{grid-column:1/3}
.dt-fields--billing #billing_house_number_field, .dt-fields--shipping #shipping_house_number_field{grid-column:1/2}
.dt-fields--billing #billing_house_number_suffix_field, .dt-fields--shipping #shipping_house_number_suffix_field{grid-column:2/3}

/* Full width for email/phone when needed */
.dt-fields--billing #billing_email_field, .dt-fields--billing #billing_phone_field{grid-column:auto}

/* Input base */
.dt-field input, .dt-field select, .dt-field textarea{border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:10px 12px;min-height:40px}

/* Ship-to toggle */
.dt-ship-toggle{margin:8px 0 12px}
.dt-ship-toggle input{margin-right:8px}


/* Generic chips (country/region) */
.dt-chip-group{display:flex;flex-wrap:wrap;gap:8px}
.dt-chip{position:relative;display:inline-flex}
.dt-chip input{position:absolute;opacity:0;pointer-events:none}
.dt-chip__label{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.10);border-radius:6px;padding:8px 12px;background:#f9faf9;cursor:pointer}
.dt-chip input:checked + .dt-chip__label{background:var(--color-primary,#84B082);border-color:var(--color-primary,#84B082);color:#fff}

.woocommerce-billing-fields__field-wrapper #billing_address_1_field{grid-column:1/3}
.woocommerce-billing-fields__field-wrapper #billing_house_number_field{grid-column:1/2}
.woocommerce-billing-fields__field-wrapper #billing_house_number_suffix_field{grid-column:2/3}

.woocommerce-shipping-fields__field-wrapper #shipping_address_1_field{grid-column:1/3}
.woocommerce-shipping-fields__field-wrapper #shipping_house_number_field{grid-column:1/2}
.woocommerce-shipping-fields__field-wrapper #shipping_house_number_suffix_field{grid-column:2/3}

/* Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:10px 12px}

/* Shipping methods styled as chips (works with default review markup) */
ul#shipping_method{display:flex;flex-wrap:wrap;gap:8px}
ul#shipping_method li{list-style:none;margin:0;padding:0}
ul#shipping_method li label{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.10);border-radius:6px;padding:8px 12px;background:#f9faf9;cursor:pointer}
ul#shipping_method input[type=radio]{position:absolute;opacity:0;pointer-events:none}
ul#shipping_method input[type=radio]:checked + label{background:var(--color-primary,#84B082);border-color:var(--color-primary,#84B082);color:#fff}

/* Place order button spacing */
#payment, #order_review .place-order{margin-top:12px}

/* Payment methods */
#payment{
	padding:28px 26px;
	border-radius:18px;
	background:#f8fafc;
	border:1px solid rgba(15,23,42,.08);
	box-shadow:0 12px 32px rgba(15,23,42,.08);
}

#payment .wc_payment_methods{
	margin:0;
	padding:0;
	list-style:none;
	grid-template-columns: 1fr;
	display:grid;
	gap:16px;
}

#payment .wc_payment_methods li{
	margin:0;
	padding:0;
}

#payment .wc_payment_method .input-radio{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

#payment .wc_payment_method label{
	position:relative;
	display:flex;
	align-items:center;
	gap:16px;
	width:100%;
	padding:18px 20px;
	border-radius:14px;
	border:1px solid rgba(15,23,42,.08);
	background:#fff;
	box-shadow:0 2px 6px rgba(15,23,42,.04);
	font-weight:600;
	color:#1f2937;
	cursor:pointer;
	transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#payment .wc_payment_method label:hover{
	border-color:#9bbb9a;
	box-shadow:0 10px 28px rgba(132,176,130,.18);
	transform:translateY(-1px);
}

#payment .wc_payment_method .input-radio:focus-visible + label{
	outline:3px solid rgba(132,176,130,.45);
	outline-offset:4px;
}

#payment .wc_payment_method .input-radio:checked + label{
	border-color:#84B082;
	box-shadow:0 14px 34px rgba(132,176,130,.22);
}

#payment .wc_payment_method label::before{
	content:'';
	flex-shrink:0;
	width:20px;
	height:20px;
	margin-right:6px;
	border-radius:50%;
	border:2px solid #cbd5e1;
	background:#fff;
	transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#payment .wc_payment_method .input-radio:checked + label::before{
	border-color:#84B082;
	background:radial-gradient(circle at center,#84B082 45%,transparent 47%);
	box-shadow:0 0 0 4px rgba(132,176,130,.18);
}

#payment .wc_payment_method .mollie-gateway-icon,
#payment .wc_payment_method svg.mollie-gateway-icon{
	max-width:110px;
	max-height:32px;
	width:auto;
	height:auto;
	display:block;
	margin-left:auto;
}

#payment .wc_payment_method img.mollie-gateway-icon{object-fit:contain}

#payment .wc_payment_method label span,
#payment .wc_payment_method label em,
#payment .wc_payment_method label small{display:block}

#payment .wc_payment_method label em,
#payment .wc_payment_method label small{
	font-weight:400;
	color:#64748b;
	margin-top:2px;
}

#payment .place-order{
	margin-top:22px;
	padding-top:22px;
	border-top:1px solid rgba(15,23,42,.08);
}

#payment .place-order .button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:48px;
	padding:11px 26px;
	border-radius:12px;
	font-weight:700;
	background:#1f2937;
	color:#fff;
	transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}

#payment .place-order .button:hover{
	background:#111827;
	box-shadow:0 14px 32px rgba(17,24,39,.18);
	transform:translateY(-1px);
}

/* Mobile */
@media (max-width: 979px){
  .dt-checkout__grid{grid-template-columns:1fr}
}

@media (max-width: 640px){
	#payment{
		padding:22px 18px;
	}

	#payment .wc_payment_method label{
		flex-wrap:wrap;
		gap:12px;
		padding:16px;
	}

	#payment .wc_payment_method .mollie-gateway-icon,
	#payment .wc_payment_method svg.mollie-gateway-icon{
		max-width:90px;
	}
}

/* Mollie In3 Custom Fields */
.dt-birthdate-inputs {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
	margin-top: 8px;
}

.dt-birthdate-inputs select {
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 6px;
	padding: 10px 12px;
	min-height: 40px;
	font-size: 14px;
	background-color: #fff;
	cursor: pointer;
}

.dt-birthdate-inputs select:focus {
	outline: none;
	border-color: var(--color-primary, #84B082);
	box-shadow: 0 0 0 3px rgba(132, 176, 130, 0.1);
}

#billing_phone_in3_field input,
#billing_birthdate_in3_field .woocommerce-input-wrapper {
	margin-top: 8px;
}

/* Error states */
#billing_phone_in3_field input.has-error,
.dt-birthdate-inputs select.has-error {
	border-color: #d32f2f;
	background-color: #ffebee;
}

.woocommerce-error-message {
	display: block;
	color: #d32f2f;
	font-size: 12px;
	margin-top: 6px;
	font-weight: 500;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
	.dt-birthdate-inputs {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.dt-birthdate-inputs select {
		padding: 8px 10px;
		font-size: 13px;
		min-height: 36px;
	}
}

/* Payment methods in 2 columns for wider screens */
	min-width: 300px;
}

/* Stack payment methods on smaller screens */
}

/* Enhanced Select Dropdowns */
.dt-select-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

.dt-select-wrapper select {
	width: 100%;
	padding: 10px 36px 10px 12px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 6px;
	background-color: #fff;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none;
}

.dt-select-wrapper select:focus {
	outline: none;
	border-color: var(--color-primary, #84B082);
	box-shadow: 0 0 0 3px rgba(132, 176, 130, 0.1);
}

.dt-select-wrapper select:hover {
	border-color: rgba(0,0,0,.2);
}

/* Custom arrow icon */
.dt-select-arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: rgba(0,0,0,.5);
	font-size: 12px;
	line-height: 1;
}

/* Payment section - make radio clickable */
#payment .wc_payment_method {
	cursor: pointer;
}

#payment .wc_payment_method input[type="radio"] {
	cursor: pointer;
}

#payment .wc_payment_method label {
	cursor: pointer;
}