/**
 * 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-inline-end: .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-inline-start: 0;
    padding-inline-end: 0;
}

/* product page file fields (1.0.10): uploaded by AJAX, the status line says what was sent */
.sicf-upload__status {
    display: block;
    margin-block-start: 0.35em;
    font-size: 0.9em;
}
.sicf-upload--busy .sicf-upload__status {
    opacity: 0.7;
}
.sicf-upload__remove {
    margin-inline-start: 0.5em;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.sicf-file-hint {
    display: block;
    font-size: 0.85em;
    opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * Choice questions as buttons, colour swatches, image swatches and image cards
 * (1.0.10). The native radio buttons / checkboxes stay in the page, visually
 * hidden, so the keyboard and screen readers work as on any form. Colours come
 * from the theme: text, borders and the selected outline use currentColor.
 * ------------------------------------------------------------------------- */
.sicf-choice__set {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.sicf-choice__set > legend {
    display: block;
    margin-block-end: 0.4em;
    padding: 0;
}
.sicf-choice__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.sicf-choice[class*="sicf-choice--cols-"] .sicf-choice__items { display: grid; }
.sicf-choice--cols-2 .sicf-choice__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sicf-choice--cols-3 .sicf-choice__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sicf-choice--cols-4 .sicf-choice__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sicf-choice--cols-5 .sicf-choice__items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sicf-choice--cols-6 .sicf-choice__items { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* label.…  in a .sicf-form-row: stronger than themes' `.woocommerce form .form-row label { display: block }` */
.sicf-form-row.sicf-choice label.sicf-choice__item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    margin: 0;
    padding: 0.2em;
    border-radius: 6px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}
/* hidden, but focusable and announced */
.sicf-choice__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.sicf-choice__price { font-size: 0.85em; opacity: 0.85; }

/* buttons, and any tile whose colour or image is missing */
.sicf-form-row.sicf-choice--buttons label.sicf-choice__item,
.sicf-form-row.sicf-choice label.sicf-choice__item--text {
    flex-direction: row;
    gap: 0.4em;
    padding: 0.45em 0.85em;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.sicf-form-row.sicf-choice--small.sicf-choice--buttons label.sicf-choice__item { padding: 0.25em 0.6em; font-size: 0.9em; }
.sicf-form-row.sicf-choice--large.sicf-choice--buttons label.sicf-choice__item { padding: 0.65em 1.1em; }

/* colour swatches */
.sicf-choice__swatch {
    display: block;
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
}
.sicf-choice--small .sicf-choice__swatch { width: 1.6em; height: 1.6em; }
.sicf-choice--large .sicf-choice__swatch { width: 3.2em; height: 3.2em; }
.sicf-choice__swatch.is-light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }

/* image swatches and cards */
.sicf-choice__image {
    display: block;
    width: 64px;
    height: 64px;
    max-width: none;
    object-fit: cover;
    border-radius: 4px;
}
.sicf-choice--images.sicf-choice--small .sicf-choice__image { width: 40px; height: 40px; }
.sicf-choice--images.sicf-choice--large .sicf-choice__image { width: 96px; height: 96px; }
.sicf-form-row.sicf-choice--cards label.sicf-choice__item {
    padding: 0.5em;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 25%, transparent);
}
.sicf-choice--cards .sicf-choice__image { width: 140px; height: 140px; }
.sicf-choice--cards.sicf-choice--small .sicf-choice__image { width: 96px; height: 96px; }
.sicf-choice--cards.sicf-choice--large .sicf-choice__image { width: 200px; height: 200px; }
.sicf-choice[class*="sicf-choice--cols-"] .sicf-choice__image { width: 100%; height: auto; aspect-ratio: 1; }

/* selected: an outline in the theme's text colour */
.sicf-choice__item:has(.sicf-choice__input:checked) {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
.sicf-choice__input:checked ~ .sicf-choice__swatch,
.sicf-choice__input:checked ~ .sicf-choice__image {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}
.sicf-choice__item:has(.sicf-choice__input:checked) .sicf-choice__swatch,
.sicf-choice__item:has(.sicf-choice__input:checked) .sicf-choice__image { box-shadow: none; }
.sicf-choice__item:has(.sicf-choice__input:checked) .sicf-choice__swatch.is-light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }

/* keyboard focus */
.sicf-choice__item:has(.sicf-choice__input:focus-visible) {
    outline: 2px dashed currentColor;
    outline-offset: 3px;
}
.sicf-choice__input:focus-visible ~ .sicf-choice__text { text-decoration: underline; }

/* sold out or switched off */
.sicf-choice__item:has(.sicf-choice__input:disabled) { cursor: not-allowed; opacity: 0.45; }

@media (forced-colors: active) {
    .sicf-choice__item:has(.sicf-choice__input:checked) { outline-color: Highlight; }
}

/* what each priced answer adds, and the options total (1.0.10) */
.sicf-field__amount {
    display: block;
    margin-block-start: 0.2em;
    font-size: 0.9em;
    opacity: 0.85;
}
.sicf-options-total {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-block: 0.75em 1em;
    padding-block-start: 0.5em;
    border-top: 1px solid currentColor;
    border-top-color: color-mix(in srgb, currentColor 20%, transparent);
    font-weight: 600;
}
.sicf-options-total[hidden],
.sicf-field__amount[hidden] { display: none; }
.sicf-price-suffix { font-size: 0.75em; font-weight: normal; opacity: 0.8; }