/**
 * 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;
	position: absolute;
}

/* 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;
}

/* ---------------------------------------------------------------------------
 * Registration shortcode: same field look as the checkout (green border,
 * muted label overlapping the input's top edge). Covers both WooCommerce's
 * native fields (username, email, password) and the custom ones.
 * ------------------------------------------------------------------------ */

.idcfe-registration-form-shortcode .form-row input.input-text,
.idcfe-registration-form-shortcode .form-row input[type="text"],
.idcfe-registration-form-shortcode .form-row input[type="tel"],
.idcfe-registration-form-shortcode .form-row input[type="email"],
.idcfe-registration-form-shortcode .form-row input[type="password"],
.idcfe-registration-form-shortcode .form-row input[type="number"],
.idcfe-registration-form-shortcode .form-row textarea,
.idcfe-registration-form-shortcode .form-row select,
.idcfe-registration-form-shortcode .form-row .select2-selection {
	border: 1px solid #00cc00 !important;
}

.idcfe-registration-form-shortcode .form-row input.idcfe-invalid,
.idcfe-registration-form-shortcode .form-row textarea.idcfe-invalid,
.idcfe-registration-form-shortcode .form-row select.idcfe-invalid {
	border-color: #e2401c !important;
}

.idcfe-registration-form-shortcode .form-row > label:not(.checkbox):not(.radio) {
	bottom: -11px;
	position: relative;
	display: inline-block !important;
	margin-left: 10px;
	padding: 0 6px;
	background-color: white;
	color: #77838F !important;
	font-size: 13px;
	font-weight: 400;
	z-index: 9;
}

/* Registration form: honour "Posición en la fila" (first/last = half width). */
.idcfe-registration-section-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4%;
}

.idcfe-registration-section-fields > .form-row {
	flex: 1 1 100%;
	float: none;
	width: auto;
	box-sizing: border-box;
}

.idcfe-registration-section-fields > .form-row.form-row-first,
.idcfe-registration-section-fields > .form-row.form-row-last {
	flex: 0 0 48%;
	max-width: 48%;
}

@media (max-width: 600px) {
	.idcfe-registration-section-fields > .form-row.form-row-first,
	.idcfe-registration-section-fields > .form-row.form-row-last {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Radio options as selectable buttons (options_layout = buttons). The native
 * radio stays in the DOM (visually hidden) so keyboard, validation and the
 * submitted value are unchanged; its sibling label is styled as the button.
 * ------------------------------------------------------------------------ */
.idcfe-radio-layout-buttons .woocommerce-input-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.idcfe-radio-layout-buttons input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.idcfe-radio-layout-buttons label.radio {
	float: none !important;
	bottom: auto !important;
	position: relative !important;
	display: inline-block !important;
	margin: 0 !important;
	padding: 9px 20px !important;
	background: #fff;
	border: 1px solid #00cc00;
	border-radius: 999px;
	color: #44505b !important;
	font-size: 14px !important;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s, color .15s;
	z-index: auto !important;
}

.idcfe-radio-layout-buttons input[type="radio"]:checked + label.radio {
	background: #00cc00;
	color: #fff !important;
}

.idcfe-radio-layout-buttons input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid #00cc00;
	outline-offset: 2px;
}

/* "Ocultar label": visually hidden but still available to screen readers.
 * Option labels (radio/checkbox text) are left alone. */
.form-row.idcfe-hide-label.idcfe-hide-label > label:not(.radio):not(.checkbox),
.idcfe-hide-label.idcfe-hide-label > legend {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}