/* ==========================================================================
   APF — Controls FIELDS (field blocks, WAPF, price chips, tables)
   Scope: .apf-common-box …
   ========================================================================== */

/* Generic field block wrappers */
.apf-common-box .control,
.apf-common-box .control-full,
.apf-common-box .apf-variation-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* WAPF normalization (visual only) */
.apf-common-box .wapf-fields-container .wapf-field-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    margin-bottom: var(--gap);
}

.apf-common-box .wapf-fields-container .wapf-field-label label {
    color: var(--text-high);
    font-size: .92rem;
    font-weight: 650;
    margin-bottom: .25rem;
    white-space: nowrap;
}

.apf-common-box .wapf-fields-container .wapf-field-input :where(select, input[type="text"], input[type="number"]) {
    width: 100%;
    padding: .6rem .7rem;
    font-size: .9rem;
    background: linear-gradient(180deg, hsl(220 8% 30% / .12), hsl(220 6% 24% / .10));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-high);
    transition: border-color var(--transition), background var(--transition);
    appearance: none;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.apf-common-box .wapf-fields-container .wapf-field-input :where(select:focus, input[type="text"]:focus, input[type="number"]:focus) {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--focus-ring);
    background: linear-gradient(180deg, hsl(220 8% 30% / .18), hsl(220 6% 24% / .14));
}

.apf-common-box .wapf-fields-container .wapf-checkbox .wapf-input-label {
    display: flex;
    align-items: center;
    font-size: .9rem;
    color: var(--text-high);
    margin-bottom: var(--gap);
}

    .apf-common-box .wapf-fields-container .wapf-checkbox .wapf-input-label input {
        margin-right: .5rem;
    }

.apf-common-box .wapf-fields-container .wapf-pricing-hint {
    color: var(--text-mid);
    font-size: .85em;
    margin-left: .25rem;
}

.apf-common-box .wapf-field-label abbr.required {
    color: var(--ctl-c2);
    text-decoration: none;
    font-weight: 700;
}

/* Dynamic variation selects holder */
.apf-common-box .apf-variation-selects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gap);
}

/* Price chip */
.apf-common-box .apf-price-box {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    background: linear-gradient(90deg, color-mix(in oklch, var(--ctl-c1) 22%, transparent), color-mix(in oklch, var(--ctl-c2) 22%, transparent));
    border: 1px solid hsl(0 0% 100% / .22);
    white-space: nowrap;
}

.apf-common-box .apf-price-line {
    display: inline-flex;
    gap: .35rem;
    align-items: baseline;
}

.apf-common-box .apf-price-label {
    color: var(--text-mid);
    font-size: .9rem;
}

.apf-common-box .apf-price-unit,
.apf-common-box .apf-price-total {
    font-weight: 800;
    font-size: 1.16rem;
    color: var(--text-high);
}

/* Variations table */
.apf-common-box .apf-variations-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    backdrop-filter: blur(6px);
}

    .apf-common-box .apf-variations-table thead th {
        text-align: left;
        font-weight: 600;
        color: var(--text-mid);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        border-bottom: 1px solid var(--border);
        padding: .55rem .65rem;
    }

    .apf-common-box .apf-variations-table tbody td {
        padding: .55rem .65rem;
        border-bottom: 1px solid var(--border);
    }

    .apf-common-box .apf-variations-table tbody tr:last-child td {
        border-bottom: 0;
    }