/**
 * Front-end layout for custom fields.
 *
 * Deliberately small and structural — spacing and stacking only, no colours or
 * type — so it corrects the things a theme cannot know about (a checkbox group
 * is many labels inside one wrapper, and a description is a <span> that has to
 * be made a block) without fighting the theme for the rest.
 */

.sicf-fields {
    margin: 0 0 1.5em;
}

.sicf-fields .sicf-form-row {
    margin-bottom: 1.1em;
}

/* a <span>, so it needs making a block before it can have space of its own */
.sicf-description {
    display: block;
    margin-top: .35em;
    font-size: .9em;
    line-height: 1.5;
    opacity: .8;
}

/* Choice groups: one option per line. Left inline by WooCommerce's own markup,
   several priced options run into each other and into the description. */
.sicf-checkbox-group,
.sicf-field--radio .woocommerce-input-wrapper {
    display: block;
    margin-top: .25em;
}

/*
 * radio options come from woocommerce_form_field(), which uses its own wrapper
 * and none of our classes, so the field wrapper is what we can hold on to.
 *
 * The .woocommerce prefix is not decoration: WooCommerce core ships
 * `.woocommerce form .form-row label.checkbox { display: inline }`, which
 * outranks a plain `.sicf-checkbox-group > label` and keeps every option on one
 * line however the theme is set up.
 */
.woocommerce .sicf-fields .sicf-form-row label.sicf-checkbox,
.woocommerce .sicf-fields .sicf-form-row .sicf-checkbox-group > label,
.woocommerce .sicf-fields .sicf-field--radio .woocommerce-input-wrapper > label,
.sicf-checkbox-group .sicf-checkbox,
.sicf-checkbox-group > label,
.sicf-field--radio .woocommerce-input-wrapper > label {
    display: block;
    margin: 0 0 .4em;
    font-weight: 400;
    line-height: 1.5;
}

.sicf-checkbox-group input[type="checkbox"],
.sicf-field--radio input[type="radio"] {
    margin-right: .5em;
}

/* the single-checkbox type reads as one statement, so it stays on its line */
.sicf-field--checkbox .sicf-form-row > label {
    display: inline-block;
    font-weight: 400;
}

.sicf-heading {
    margin: 1.2em 0 .4em;
}

.sicf-heading__description {
    margin: 0 0 .8em;
}

/* On the product page the panel sits between the price and the add-to-cart
   button, inside the theme's own form, so it needs a little room of its own. */
.sicf-fields--product {
    margin: 1.2em 0;
    clear: both;
}

.sicf-fields--product .sicf-form-row {
    padding-left: 0;
    padding-right: 0;
}