/**
 * Onsite bundle — product-page "Add to your bundle" section (Bundles slice 4).
 * Neutral, theme-friendly styling that mirrors the batch selector / fees blocks.
 */
.lms-onsite-bundle {
    margin: 16px 0 20px; padding-top: 14px; border-top: 1px solid #e5e7eb;
}
.lms-onsite-bundle-head { font-size: 15px; font-weight: 700; margin: 0 0 8px; }

/* Shown in place of the bundle if the offer lapses while the page is open. */
.lms-onsite-bundle-expired {
    margin: 16px 0 20px; padding: 12px 14px; border-radius: 10px;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 14px; font-weight: 600;
}

.lms-onsite-bundle-expiry {
    display: inline-block; margin: 0 0 12px; padding: 5px 11px; border-radius: 999px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; font-weight: 700;
}

.lms-onsite-bundle-items { display: flex; flex-direction: column; gap: 10px; }
.lms-onsite-bundle-item {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 14px; background: #fff;
}
.lms-onsite-bundle-item.is-forced { background: #f9fafb; }

.lms-onsite-bundle-pick {
    display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; flex: 1 1 auto; min-width: 0;
}
.lms-onsite-bundle-item.is-forced .lms-onsite-bundle-pick { cursor: default; }
.lms-onsite-bundle-pick input { margin: 0; flex: 0 0 auto; }
.lms-onsite-bundle-name { color: #111827; font-weight: 600; min-width: 0; }
.lms-onsite-bundle-tag {
    display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; vertical-align: middle;
    border-radius: 6px; padding: 1px 7px; background: #eef0f3; color: #6b7280;
}
.lms-onsite-bundle-tag.is-required { background: #fef2f2; color: #b91c1c; }
.lms-onsite-bundle-tag.is-recommended { background: #eff6ff; color: #1d4ed8; }

.lms-onsite-bundle-price { font-weight: 700; white-space: nowrap; margin-left: auto; }

/* Onsite item — inline batch select. The selected batch's price is shown in the option text, so the
   separate price span is hidden here (it stays in the DOM for the JS total, just not displayed). */
.lms-onsite-bundle-batchpick {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; flex: 1 1 100%; margin-left: 26px;
}
.lms-onsite-bundle-batchlabel { font-size: 13px; color: #6b7280; }
.lms-onsite-bundle-batchpick select {
    flex: 1 1 auto; min-width: 0; max-width: 100%; padding: 6px 8px;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
}
.lms-onsite-bundle-batchpick .lms-onsite-bundle-price { display: none; }

/* A bundled course's own REQUIRED fees (charged automatically with the add-on), listed under it. */
.lms-onsite-bundle-itemfees {
    flex: 1 1 100%; margin-left: 26px; font-size: 12.5px; color: #6b7280; line-height: 1.4;
}

/* A bundled course's OPTIONAL fees — checkboxes the student can add to the add-on. */
.lms-onsite-bundle-optfees {
    flex: 1 1 100%; margin-left: 26px; display: flex; flex-direction: column; gap: 5px; margin-top: 4px;
}
.lms-onsite-bundle-optfees-label { font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; }
.lms-onsite-bundle-optfee {
    display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; margin: 0;
    padding: 6px 9px; border: 1px solid #eef0f3; border-radius: 7px; background: #fcfcfd;
}
.lms-onsite-bundle-optfee:hover { border-color: #d1d5db; }
.lms-onsite-bundle-optfee input { margin: 0; flex: 0 0 auto; }
.lms-onsite-bundle-optfee-name { flex: 1 1 auto; min-width: 0; color: #111827; }
.lms-onsite-bundle-optfee-amt { font-weight: 700; color: #374151; white-space: nowrap; }

/* The live selection preview (course + add-ons + discount + total) is the always-on
   "Your selection" panel — its styles live in frontend.css (.lms-onsite-summary*). */