/**
 * Styles for the delivery/pickup fields rendered inside the WooCommerce
 * Checkout block.
 *
 * Our fields render as plain <input>/<select> elements nested inside
 * WooCommerce Blocks' own checkout containers (e.g. the contact/shipping/
 * billing address blocks). WooCommerce Blocks styles those same raw tags
 * with descendant selectors like `.wc-block-checkout__form input`, which
 * out-specificities a bare `.archwoo-input` class selector. So every rule
 * here is written specific enough (container class + tag + class) to win
 * that fight, with `!important` on the handful of properties that matter
 * visually — safe here because it's scoped to our own field markup only,
 * not a blanket override of checkout styling in general. xxxxxxxxxxxxxxxxxxx
 */

.archwoo-checkout-fields {
	margin-bottom: 1.5em;
}

.archwoo-checkout-fields__heading {
	font-weight: 600;
	margin-bottom: 0.75em;
}

.archwoo-checkout-fields .archwoo-field {
	margin-bottom: 1em;
}

.archwoo-checkout-fields .archwoo-field__label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}

.archwoo-checkout-fields .archwoo-field__label .required {
	color: #cc1818;
	text-decoration: none;
	margin-left: 0.2em;
}

.archwoo-checkout-fields .archwoo-field__error {
	color: #cc1818;
	font-size: 0.875em;
	margin-top: 0.35em;
}

.archwoo-checkout-fields input.archwoo-input,
.archwoo-checkout-fields select.archwoo-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.85em 1em !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 0.95em !important;
	line-height: normal !important;
	background-color: #fff !important;
	color: #1f2937 !important;
	height: auto !important;
	margin: 0 !important;
}

.archwoo-checkout-fields select.archwoo-input {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 2.5em !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1em center !important;
	background-size: 11px 7px !important;
}

.archwoo-checkout-fields input.archwoo-input:focus,
.archwoo-checkout-fields select.archwoo-input:focus {
	outline: none !important;
	border-color: #2f6fed !important;
	box-shadow: 0 0 0 1px #2f6fed !important;
}

.archwoo-checkout-fields input.archwoo-input--custom-tip {
	margin-top: 0.5em !important;
}

.archwoo-checkout-fields .archwoo-radio-group {
	display: flex;
	gap: 0.75em;
}

.archwoo-checkout-fields .archwoo-radio {
	position: relative;
	flex: 1 1 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1em !important;
	border: 2px solid #2f6fed;
	border-radius: 8px;
	font-weight: 600;
	color: #1f2937;
	background-color: #fff;
	cursor: pointer;
	width: auto !important;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The radio input is only needed for click handling / form semantics — the
   label itself renders the whole pill, so the native control is stretched
   over it invisibly rather than shown inline (which left an oversized,
   misaligned circle on top of the button). */
.archwoo-checkout-fields .archwoo-radio input[type="radio"] {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0 !important;
	cursor: pointer;
}

.archwoo-checkout-fields .archwoo-radio--selected {
	background-color: #2f6fed;
	color: #fff;
}