/* Ensure fields have consistent width and spacing */
.courier-fields .select2-container {
    width: 100% !important;
}

.courier-fields .woocommerce-input-wrapper {
    display: flex;
    flex-direction: column;
}

.courier-fields .form-row {
    margin-bottom: 1em;
}

/* Hide the label for the courier selection
#billing_courier_selection_field > label {
    display: none;
}
 */

/* Style radio buttons as buttons */
.fcf-radio-buttons input[type="radio"] {
    display: none;
}

.fcf-radio-buttons .woocommerce-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the gap between buttons */
}

.fcf-radio-buttons .woocommerce-input-wrapper label.radio {
    display: inline-block;
    background-color: white;
    color: #000;
    padding: 10px;
    border-radius: 20px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    width: calc(25% - 10px); /* Adjust the width to account for the gap */
    box-sizing: border-box;
    text-align: center;
    background-size: 50%; /* Adjust size as needed */
    background-repeat: no-repeat;
    background-position: center;
    height: 50px; /* Adjust the height to fit your SVG */
    line-height: 50px; /* Center the text vertically */
    position: relative;
}

/* Hide the text within the label but keep the SVG visible */
.fcf-radio-buttons .woocommerce-input-wrapper label.radio::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

/* SVG images for each courier */
#billing_courier_selection_office-speedy + label.radio::before {
    background-image: url('../../img/office_speedy.svg');
}

#billing_courier_selection_office-econt + label.radio::before {
    background-image: url('../../img/office_econt.svg');
}

#billing_courier_selection_box-now + label.radio::before {
    background-image: url('../../img/boxnow.svg');
}

#billing_courier_selection_to-address + label.radio::before {
    background-image: url('../../img/address.svg');
}

/* Adjust for mobile: 2 per row */
@media (max-width: 768px) {
    .fcf-radio-buttons .woocommerce-input-wrapper label.radio {
        width: calc(50% - 10px); /* Adjust the width to account for the gap */
    }
}

.fcf-radio-buttons input[type="radio"]:checked + label.radio {
    border-color: #3f7979;
}

/* Add hover effect for the labels */
.fcf-radio-buttons .woocommerce-input-wrapper label.radio:hover {
    border-color: #ccc;
}

/* Disabled state */
.fcf-radio-buttons input[type="radio"]:disabled + label.radio {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Hide all courier fields initially */
.courier-fields {
    display: none;
}

/* Hide billing address 1 field initially */
#billing_address_1_field {
    display: none;
}

/* Hide to-address fields initially */
.to-address-field {
    display: none;
}