/**
 * Frontend checkout styles – Advanced Custom Checkout Fields for WooCommerce
 * Clean, modern field styling that fits most themes.
 *
 * @package RoyalCFM
 */

.woocommerce .royalcfm-field.form-row {
	margin-bottom: 1.25em;
	padding: 0;
}

.woocommerce .royalcfm-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: inherit;
}

.woocommerce .royalcfm-field .description {
	font-size: 0.875em;
	color: #6c757d;
	margin-top: 6px;
	line-height: 1.4;
}

.woocommerce .royalcfm-field input[type="text"],
.woocommerce .royalcfm-field input[type="email"],
.woocommerce .royalcfm-field input[type="tel"],
.woocommerce .royalcfm-field input[type="number"],
.woocommerce .royalcfm-field input[type="url"],
.woocommerce .royalcfm-field input[type="search"],
.woocommerce .royalcfm-field input[type="date"],
.woocommerce .royalcfm-field input[type="week"],
.woocommerce .royalcfm-field input[type="time"],
.woocommerce .royalcfm-field input[type="password"],
.woocommerce .royalcfm-field select,
.woocommerce .royalcfm-field textarea {
	width: 100%;
	padding: 0.75em 1em;
	border-radius: 6px;
	border: 1px solid #ddd;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce .royalcfm-field input:focus,
.woocommerce .royalcfm-field select:focus,
.woocommerce .royalcfm-field textarea:focus {
	border-color: #3858e9;
	outline: none;
	box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.15);
}

.woocommerce .royalcfm-field input[type="color"] {
	height: 2.75em;
	padding: 4px;
	cursor: pointer;
	border-radius: 6px;
	border: 1px solid #ddd;
}

.woocommerce .royalcfm-field input[type="range"] {
	width: 100%;
	max-width: 320px;
	height: 8px;
	padding: 0;
}

.woocommerce .royalcfm-field input[type="checkbox"] {
	width: auto;
	margin-right: 8px;
	vertical-align: middle;
}

/* Checkbox group (multiple options) */
.woocommerce .royalcfm-field.royalcfm-field-type-checkbox .woocommerce-input-wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	
}

.woocommerce .royalcfm-field .royalcfm-checkbox-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.woocommerce .royalcfm-field .royalcfm-checkbox-option input[type="checkbox"] {
	accent-color: #3858e9;
}

/* Radio: horizontal row, clean layout. "(optional)" only on main label. */
.woocommerce .royalcfm-field.royalcfm-field-type-radio > label:first-child {
	display: block;
	margin-bottom: 10px;
	font-weight: 500;
	color: inherit;
}

/* Hide "(optional)" inside option list – show only on main label above */
.woocommerce .royalcfm-field.royalcfm-field-type-radio .woocommerce-input-wrapper .optional {
	display: none !important;
}

.woocommerce .royalcfm-field .woocommerce-input-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.woocommerce .royalcfm-field .woocommerce-input-wrapper > input[type="radio"] {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0;
	vertical-align: middle;
	accent-color: #3858e9;
	cursor: pointer;
	flex-shrink: 0;
}

.woocommerce .royalcfm-field .woocommerce-input-wrapper > label.radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}

.woocommerce .royalcfm-field .royalcfm-radio-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.woocommerce .royalcfm-field .royalcfm-radio-group label {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

/* Order received / My Account – custom fields block */
.woocommerce-royalcfm-fields {
	margin-top: 1.75em;
	padding: 1.25em 0;
	border-top: 1px solid #eee;
}

.woocommerce-royalcfm-fields h2 {
	font-size: 1.1em;
	margin: 0 0 1em 0;
	font-weight: 600;
}

.woocommerce-royalcfm-fields .woocommerce-table.royalcfm_fields {
	width: 100%;
	border: none;
}

.woocommerce-royalcfm-fields .woocommerce-table.royalcfm_fields th {
	text-align: left;
	padding: 10px 14px 10px 0;
	vertical-align: top;
	width: 35%;
	font-weight: 500;
	color: #555;
}

.woocommerce-royalcfm-fields .woocommerce-table.royalcfm_fields td {
	padding: 10px 0;
}

.select2-container .royalcfm-field-select {
	min-width: 100%;
}