/**
 * Required Checkout Fields - Public Styles
 * Frontend styles for WooCommerce checkout field requirements
 */

/* ==========================================================================
   Required Field Indicators
   ========================================================================== */

/* Enhanced required field styling */
.woocommerce-checkout .wt-rcf-required .select2-container,
.woocommerce-checkout .wt-rcf-required input,
.woocommerce-checkout .wt-rcf-required select,
.woocommerce-checkout .wt-rcf-required textarea {
    border-color: #d63638;
}

/* Required asterisk styling */
.woocommerce-checkout .wt-rcf-required label .required {
    color: #d63638;
    font-weight: bold;
}

/* ==========================================================================
   Error Messages
   ========================================================================== */

/* Enhanced error styling for required fields */
.woocommerce-checkout .wt-rcf-error {
    background-color: #fcf2f2;
    border-left: 4px solid #d63638;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.woocommerce-checkout .wt-rcf-error p {
    color: #d63638;
    margin: 0;
    font-size: 14px;
}

/* ==========================================================================
   Field Focus States
   ========================================================================== */

/* Enhanced focus states for required fields */
.woocommerce-checkout .wt-rcf-required input:focus,
.woocommerce-checkout .wt-rcf-required select:focus,
.woocommerce-checkout .wt-rcf-required textarea:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
    outline: none;
}

/* ==========================================================================
   Theme Compatibility
   ========================================================================== */

/* Ensure compatibility with popular WooCommerce themes */
.woocommerce form .form-row .wt-rcf-required input,
.woocommerce form .form-row .wt-rcf-required select,
.woocommerce form .form-row .wt-rcf-required textarea {
    width: 100%;
}

/* Storefront theme compatibility */
.woocommerce.storefront form .form-row .wt-rcf-required {
    margin-bottom: 1em;
}