/**
 * Billing Fields Component
 *
 * Styles for factuur gegevens (billing details) section.
 *
 * @package Hafo\Checkout
 * @version 1.0.0
 */


/* Billing Fields Container */

.hafo-checkout-fields__section .woocommerce-billing-fields {
    margin-bottom: 0;
}

.woocommerce-billing-fields h3 {
    font-size: var(--hafo-checkout-font-size-lg);
    font-weight: var(--hafo-checkout-font-weight-semibold);
    color: var(--hafo-checkout-text);
    margin: 0 0 var(--hafo-checkout-spacing-lg) 0;
    padding-bottom: var(--hafo-checkout-spacing-md);
    border-bottom: 1px solid var(--hafo-checkout-border);
    font-family: var(--hafo-checkout-font-family);
}


/* Field Wrapper */

.woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hafo-checkout-spacing-lg);
}


/* Form Row Styling */

.woocommerce-billing-fields .form-row {
    margin: 0;
    padding: 0;
}

.woocommerce-billing-fields .form-row-wide {
    grid-column: 1 / -1;
}

.woocommerce-billing-fields .form-row-first {
    grid-column: 1;
}

.woocommerce-billing-fields .form-row-last {
    grid-column: 2;
}


/* Labels */

.woocommerce-billing-fields .form-row label {
    display: block;
    font-size: var(--hafo-checkout-font-size-sm);
    font-weight: var(--hafo-checkout-font-weight-medium);
    color: var(--hafo-checkout-text);
    margin-bottom: var(--hafo-checkout-spacing-xs);
    line-height: 1.5;
}

.woocommerce-billing-fields .form-row label .required {
    color: var(--hafo-checkout-error, #d63638);
    text-decoration: none;
    margin-left: 2px;
}


/* Input Fields */

.woocommerce-billing-fields .form-row input[type="text"],
.woocommerce-billing-fields .form-row input[type="email"],
.woocommerce-billing-fields .form-row input[type="tel"],
.woocommerce-billing-fields .form-row input[type="number"],
.woocommerce-billing-fields .form-row select,
.woocommerce-billing-fields .form-row textarea {
    width: 100% !important;
    padding: var(--hafo-checkout-spacing-md);
    font-size: var(--hafo-checkout-font-size-base);
    font-family: inherit;
    color: var(--hafo-checkout-text);
    background-color: var(--hafo-checkout-background, #fff);
    border: 1px solid var(--hafo-checkout-border);
    border-radius: var(--hafo-checkout-radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.woocommerce-billing-fields .form-row input[type="text"]:focus,
.woocommerce-billing-fields .form-row input[type="email"]:focus,
.woocommerce-billing-fields .form-row input[type="tel"]:focus,
.woocommerce-billing-fields .form-row input[type="number"]:focus,
.woocommerce-billing-fields .form-row select:focus,
.woocommerce-billing-fields .form-row textarea:focus {
    outline: none;
    border-color: var(--hafo-checkout-primary, #2271b1);
    box-shadow: 0 0 0 2px rgb(34 113 177 / 10%);
}

.woocommerce-billing-fields .form-row input::placeholder,
.woocommerce-billing-fields .form-row textarea::placeholder {
    color: var(--hafo-checkout-text-muted, #757575);
    opacity: 1;
}

p#billing_first_name_field,
p#billing_last_name_field {
    width: 100% !Important;
}

/* Select Dropdowns */

.woocommerce-billing-fields .form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--hafo-checkout-spacing-md) center;
    padding-right: calc(var(--hafo-checkout-spacing-xl) + var(--hafo-checkout-spacing-sm));
    cursor: pointer;
}


/* Textarea */

.woocommerce-billing-fields .form-row textarea {
    min-height: 100px;
    resize: vertical;
}


/* Error States */

.woocommerce-billing-fields .form-row.woocommerce-invalid input,
.woocommerce-billing-fields .form-row.woocommerce-invalid select,
.woocommerce-billing-fields .form-row.woocommerce-invalid textarea {
    border-color: var(--hafo-checkout-error, #d63638);
}

.woocommerce-billing-fields .form-row.woocommerce-invalid label {
    color: var(--hafo-checkout-error, #d63638);
}

.woocommerce-billing-fields .woocommerce-error {
    color: var(--hafo-checkout-error, #d63638);
    font-size: var(--hafo-checkout-font-size-sm);
    margin-top: var(--hafo-checkout-spacing-xs);
    display: block;
}


/* Checkbox and Radio */

.woocommerce-billing-fields .form-row input[type="checkbox"],
.woocommerce-billing-fields .form-row input[type="radio"] {
    width: auto;
    margin-right: var(--hafo-checkout-spacing-xs);
    cursor: pointer;
}

.woocommerce-billing-fields .form-row input[type="checkbox"]+label,
.woocommerce-billing-fields .form-row input[type="radio"]+label {
    display: inline-block;
    margin-bottom: 0;
    cursor: pointer;
}


/* Field Description */

.woocommerce-billing-fields .form-row .description {
    font-size: var(--hafo-checkout-font-size-xs);
    color: var(--hafo-checkout-text-muted, #757575);
    margin-top: var(--hafo-checkout-spacing-xs);
    display: block;
}