/* WC Addon Forms – frontend
   Keeps to the theme's own inputs/labels; only layout + swatches are styled here. */

.wcaf-wrap { margin: 0 0 1.25em; clear: both; }
.wcaf-form-title { margin: 0 0 .75em; }

.wcaf-fields { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.wcaf-field { box-sizing: border-box; padding: 0 8px; margin: 0 0 1em; width: 100%; }
.wcaf-w-75 { width: 75%; }
.wcaf-w-66 { width: 66.666%; }
.wcaf-w-50 { width: 50%; }
.wcaf-w-33 { width: 33.333%; }
.wcaf-w-25 { width: 25%; }
@media (max-width: 600px) { .wcaf-field[class*="wcaf-w-"] { width: 100%; } }

.wcaf-field.wcaf-hidden { display: none; }
.wcaf-label { display: block; margin: 0 0 .35em; font-weight: 600; }
.wcaf-price-tag { font-weight: 400; opacity: .8; font-size: .92em; }
.wcaf-desc { margin: .35em 0 0; font-size: .9em; opacity: .8; }
.wcaf-error { margin: .35em 0 0; font-size: .9em; color: #b32d2e; }
.wcaf-has-error .input-text,
.wcaf-has-error select { border-color: #b32d2e; }

.wcaf-field .input-text,
.wcaf-field select.wcaf-select { width: 100%; box-sizing: border-box; }
.wcaf-type-checkbox .wcaf-check { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; }

.wcaf-choices { display: flex; flex-direction: column; gap: .4em; }
.wcaf-choices.wcaf-layout-inline { flex-direction: row; flex-wrap: wrap; gap: .4em 1.25em; }
.wcaf-choices.wcaf-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .4em .75em; }
.wcaf-choice { display: inline-flex; align-items: flex-start; gap: .5em; cursor: pointer; margin: 0; }
.wcaf-choice input { margin-top: .25em; flex: none; }

/* Swatches */
.wcaf-swatches { display: flex; flex-wrap: wrap; gap: .6em .75em; }
.wcaf-swatches.wcaf-layout-vertical { flex-direction: column; }
.wcaf-swatches.wcaf-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--wcaf-swatch, 60px) + 24px), 1fr)); }
.wcaf-swatch { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .3em; cursor: pointer; margin: 0; max-width: calc(var(--wcaf-swatch, 60px) + 40px); text-align: center; }
.wcaf-swatches.wcaf-layout-vertical .wcaf-swatch { flex-direction: row; max-width: none; text-align: left; }
.wcaf-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wcaf-swatch-visual { display: block; width: var(--wcaf-swatch, 60px); height: var(--wcaf-swatch, 60px); overflow: hidden; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.15); box-sizing: border-box; transition: box-shadow .15s, border-color .15s; }
.wcaf-shape-rounded .wcaf-swatch-visual { border-radius: 8px; }
.wcaf-shape-circle .wcaf-swatch-visual { border-radius: 50%; }
.wcaf-swatch-visual img, .wcaf-swatch-color, .wcaf-swatch-empty { display: block; width: 100%; height: 100%; object-fit: cover; }
.wcaf-swatch-empty { background: repeating-linear-gradient(45deg, #eee 0 6px, #f8f8f8 6px 12px); }
.wcaf-swatch:hover .wcaf-swatch-visual { box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.wcaf-swatch input:checked + .wcaf-swatch-visual { border-color: currentColor; box-shadow: 0 0 0 2px currentColor; }
.wcaf-swatch input:focus-visible + .wcaf-swatch-visual { outline: 2px solid currentColor; outline-offset: 3px; }
.wcaf-swatch-label { font-size: .88em; line-height: 1.25; }

/* Quantity next to a field */
.wcaf-qty { margin-top: .5em; }
.wcaf-qty label { display: inline-flex; align-items: center; gap: .5em; font-size: .92em; }
.wcaf-qty-input { width: 5em; }

/* Live price summary */
.wcaf-summary { margin: .5em 0 1em; padding: .75em 0 0; border-top: 1px solid rgba(0,0,0,.12); }
.wcaf-summary-row { display: flex; justify-content: space-between; gap: 1em; padding: .2em 0; }
.wcaf-summary-total { font-weight: 700; font-size: 1.1em; }

@media (prefers-reduced-motion: reduce) {
	.wcaf-swatch-visual { transition: none; }
}

/* Selected-value label (e.g. "Color — Steel Blue") */
.wcaf-selected-value { font-weight: 400; margin-left: .25em; color: var(--wcaf-selected-color, inherit); }

/* Button-style choices (rectangular buttons like a size picker) */
.wcaf-choices-button { display: flex; flex-wrap: wrap; gap: .5em; }
.wcaf-choices-button .wcaf-choice { position: relative; margin: 0; }
.wcaf-choices-button .wcaf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wcaf-choices-button .wcaf-choice > span { display: inline-flex; align-items: center; justify-content: center; min-width: 3em; padding: .6em 1.1em; border: 1px solid #ccc; background: #fff; text-align: center; transition: border-color .15s, box-shadow .15s; }
.wcaf-choices-button .wcaf-choice:hover > span { border-color: #888; }
.wcaf-choices-button .wcaf-choice input:checked + span { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
.wcaf-choices-button .wcaf-choice input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }

/* Options hidden by conditional logic */
.wcaf-opt-hidden { display: none !important; }