/**
 * Frontend styles for ID Checkout Fields Editor plugin.
 *
 * Minimal styling for custom field types rendered on the WooCommerce checkout.
 *
 * @package IdCheckoutFieldsEditor
 */

/* Headings: match typical WooCommerce section heading margins. */
.idcfe-heading {
	margin: 1.5em 0 0.75em 0;
	font-size: inherit;
	font-weight: 600;
}

/* Paragraphs: muted text with reasonable spacing. */
.idcfe-paragraph {
	margin: 1em 0;
	color: #555;
}

/* Error messages: red text, small size, block display. */
.idcfe-error {
	display: block;
	margin-top: 0.25em;
	color: #e2401c;
	font-size: 0.875em;
}

/* Invalid input borders: red to match WooCommerce error state. */
input.idcfe-invalid,
select.idcfe-invalid {
	border: 1px solid #e2401c;
}

/* Checkbox group legend: reasonable spacing. */
.idcfe-checkbox-group legend {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 600;
}

/* Checkbox labels inside a group: stack vertically with modest spacing. */
.idcfe-checkbox-group label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: normal;
}

.idcfe-checkbox-group label input[type="checkbox"] {
	margin-right: 0.5em;
	vertical-align: middle;
}

/* Multi-select: ensure reasonable visual separation. */
.idcfe-multiselect {
	min-height: 100px;
}

/* ---------------------------------------------------------------------------
 * Checkout field appearance: green border on inputs/selects, muted labels
 * on a white ground. Scoped to the checkout form so it does not leak into
 * other WooCommerce pages that also load this stylesheet.
 * ------------------------------------------------------------------------ */

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-selection {
	border: 1px solid #7ad03a;
}

.woocommerce-checkout .form-row > label {
	background-color: white;
	color: #77838F;
}

/* Keep the WooCommerce error state visible over the green border above. */
.woocommerce-checkout .form-row input.idcfe-invalid,
.woocommerce-checkout .form-row textarea.idcfe-invalid,
.woocommerce-checkout .form-row select.idcfe-invalid {
	border-color: #e2401c;
}

/* ---------------------------------------------------------------------------
 * Radio option layout (idcfe-radio-layout-column | idcfe-radio-layout-row).
 * WooCommerce's woocommerce_form_field() renders radio options as a flat
 * sequence of <input type="radio"> + <label class="radio"> sibling pairs
 * inside .woocommerce-input-wrapper, so the column layout uses a float to
 * keep each input on the same line as its own label.
 * ------------------------------------------------------------------------ */


.woocommerce-checkout select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea {
	border: 1px solid !important; 
	border-color: #00cc00 !important;
}

.woocommerce-billing-fields label {
	bottom: -19px;
    position: relative;
    display: inline-block !important;
    margin-left: 10px;
    padding: 0px 6px;
    color: #77838F !important;
    font-size: 13px;
    font-weight: 400;
	z-index: 9;
}

.elementor-widget-woocommerce-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px! important;
}