/* The course's learning tracks (course/parts/plans.php): "there is a paid track too" under the price
   (Figma 03.2) and the dialog it opens (03.3). */

/* ---- the line under the price ---- */
/* Inline, so on a narrow card the words wrap and the mark follows the last of them. */
.cil-course .cil-course-plans-line {
    display: inline;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-blue-dark-1);
    text-align: start;
}
.cil-course .cil-course-plans-line:hover { background: none; }
.cil-course .cil-course-plans-line:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cil-course .cil-course-plans-line__icon { display: inline-block; width: 15px; height: 15px; margin-inline-start: 5px; vertical-align: -2px; }
/* Its own line under the price, in the fact's column. */
.cil-course-fact__text:has(.cil-course-plans-line) { align-items: flex-start; }

/* ---- the dialog: the shared shell and close button (dialog.css), the tracks inside ---- */
.cil-course-plans { --cd-grey-1: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white)); }   /* Figma's #F6F6F6 */
.cil-course .cil-course-plans__title { margin: 0 0 8px; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--cil-black-dark-4); }
.cil-course .cil-course-plans__text { max-width: 560px; margin: 0 auto 8px; font-size: 16px; line-height: 1.2; color: var(--cil-black-regular-7); }

.cil-course-plans__row { display: flex; align-items: flex-start; gap: 16px; text-align: start; }
.cil-course-plan {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 20px;
    border-radius: 12px;
    background: var(--cd-grey-1);
}
.cil-course-plan--paid { border: 1px solid var(--cil-blue); background: var(--cil-blue-light-1); }
.cil-course .cil-course-plan__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--cil-black-regular-7); }
.cil-course .cil-course-plan__price { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--cil-black-dark-4); }
.cil-course .cil-course-plan__terms { margin: 0; font-size: 14px; line-height: 1.2; color: var(--cil-black-regular-3); }
.cil-course-plan__items { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cil-course-plan__items li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 16px; line-height: 1.2; color: var(--cil-black-dark-4); }
.cil-course-plan__items li::before { content: none; }
.cil-course-plan__tick { width: 18px; height: 18px; color: var(--cil-green); }
/* What the editor wrote beyond the ticks, and the paid extras: smaller, under them. */
.cil-course-plan__more, .cil-course-plan__note { font-size: 14px; line-height: 1.4; color: var(--cil-black-regular-7); }
.cil-course .cil-course-plan__more p, .cil-course .cil-course-plan__note p { margin: 0 0 6px; }
.cil-course .cil-course-plan__note h4 { margin: 4px 0 6px; font-size: 14px; font-weight: 600; color: var(--cil-black-regular-7); }
.cil-course-plan__note ul { margin: 0; padding-inline-start: 18px; }
.cil-course-plan__note li { margin: 0 0 4px; }

/* ---- the phone: the tracks one above the other, 16px from the screen's edges (03.3 mobile) ---- */
@media (max-width: 767px) {
    .cil-course .cil-course-plans__title { padding-inline: 32px; }
    .cil-course-plans__text { margin-bottom: 4px; }
    .cil-course-plans__row { flex-direction: column; align-items: stretch; gap: 12px; }
    .cil-course-plan__items li { font-size: 14px; }
}