/* ══════════════════════════════════════════════════
   WCVO Product Forms — Frontend  (v2.1.0)
   Loaded on product pages via WCVO_Forms::enqueue_front_assets()
══════════════════════════════════════════════════ */

.wcvo-product-form {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 22px 18px;
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.wcvo-form-title {
    font-size: 15px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #f2f4f7;
    letter-spacing: -.01em;
}

.wcvo-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wcvo-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Label */
.wcvo-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.4;
}
.wcvo-field-label .wcvo-required-star {
    color: #e02020;
    font-size: 14px;
    line-height: 1;
}

/* Text / Textarea / Select */
.wcvo-field-input,
.wcvo-field-textarea,
.wcvo-field-select {
    width: 100%;
    padding: 10px 13px;
    font-size: 14px;
    color: #101828;
    background: #fff;
    border: 1.5px solid #d0d5dd;
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    line-height: 1.5;
    appearance: auto;
    -webkit-appearance: auto;
}
.wcvo-field-input:focus,
.wcvo-field-textarea:focus,
.wcvo-field-select:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,.12);
}
.wcvo-field-input.wcvo-invalid,
.wcvo-field-textarea.wcvo-invalid,
.wcvo-field-select.wcvo-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217,45,32,.10);
}

.wcvo-field-textarea {
    resize: vertical;
    min-height: 78px;
}

/* Select dropdown arrow */
.wcvo-field-select {
    cursor: pointer;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Radio / Checkbox groups */
.wcvo-radio-group,
.wcvo-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0;
}

.wcvo-radio-label,
.wcvo-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #344054;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: background .12s, border-color .12s;
    user-select: none;
}
.wcvo-radio-label:hover,
.wcvo-checkbox-label:hover {
    background: #f5f8ff;
    border-color: #c7d7fc;
}

.wcvo-radio-label input[type="radio"],
.wcvo-checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #0d6efd;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* Highlight selected radio/checkbox options */
.wcvo-radio-label:has(input:checked),
.wcvo-checkbox-label:has(input:checked) {
    background: #eff6ff;
    border-color: #93c5fd;
}

/* ── Validation error message ─────────────────── */
.wcvo-field-error {
    font-size: 12px;
    color: #d92d20;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 600px) {
    .wcvo-product-form {
        padding: 14px 14px 12px;
    }
}

/* ══════════════════════════════════════════════════
   MULTIPLIER FIELD  (v2.2.0)
   Card-grid picker for duration / meals-per-day etc.
══════════════════════════════════════════════════ */
.wcvo-field-type-multiplier .wcvo-field-label {
    margin-bottom: 2px;
}

.wcvo-multiplier-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 4px;
}

/* Individual multiplier card button */
.wcvo-mult-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    min-width: 76px;
    border: 2px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .14s, background .14s, box-shadow .14s, transform .1s;
    user-select: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.wcvo-mult-card:hover {
    border-color: #0d6efd;
    background: #f5f8ff;
    box-shadow: 0 2px 8px rgba(13,110,253,.12);
}
.wcvo-mult-card:active {
    transform: scale(.97);
}

/* Selected state */
.wcvo-mult-card.wcvo-mult-active {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 3px 10px rgba(13,110,253,.28);
}
.wcvo-mult-card.wcvo-mult-active:hover {
    background: #0b5ed7;
    border-color: #0b5ed7;
}

/* Checkmark that appears when active */
.wcvo-mult-check {
    display: none;
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.wcvo-mult-card.wcvo-mult-active .wcvo-mult-check {
    display: block;
}

/* Required validation hint */
.wcvo-mult-required-hint {
    font-size: 12px;
    color: #d92d20;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Price Breakdown  "$10.00  × 3 Meals/Day = $30.00  × 5 Days = $150.00" ── */
#wcvo-price-breakdown {
    display: none;          /* shown via JS when multipliers are active */
    font-size: 13px;
    font-weight: 600;
    color: #0369a1;
    background: #e0f2fe;
    border: 1.5px solid #bae6fd;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 8px;
    letter-spacing: .01em;
    line-height: 1.6;
    white-space: pre-wrap;  /* keep the  spaces between steps */
    word-break: break-word;
}

/* ── Cart meta tag for multipliers ── */
.wcvo-mult-tag {
    display: inline-block;
    background: #dce8ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Responsive: wrap on small screens */
@media (max-width: 480px) {
    .wcvo-multiplier-grid { gap: 6px; }
    .wcvo-mult-card { padding: 8px 12px; font-size: 13px; min-width: 60px; }
}



/* ── Category-scoped forms (v2.6.0) ── */
.wcvo-form-hidden {
    display: none !important;
}