/* v21 responsive overrides for the "learn" page group: scoped to its pages, loaded after every other stylesheet.
   Pages: /home/courses, /home/course/<slug>/<id>, /learn, /topics, /topics/<topic>, /home/compare, /home/shopping_cart,
   /verify, /paths, /paths/<slug>, /levels, /home/instructor_page/<id>.
   Rule: components are inline-size containers and their text, paddings and icons scale with clamp(min, Ncqi, max);
   the max of every clamp is today's desktop value, so 1200px+ looks the same. Page-level text uses clamp(rem + vw). */

/* ============================================================
   1. Course cards (grid cards on the courses page, the related courses on a course page, the instructor page
      and the compare page). The card is the container; its text scales with the card width.
   ============================================================ */
:is(.courses-list-view, .course-details-card, .instructor-1, .compare-card) .courses-card-body { container-type: inline-size; min-width: 0; }
/* The old theme gave the image box a fixed 261.42px width (2px wider than a 1200px card, narrower than an instructor page card)
   and the image a fixed 168px height (a white band under the image on phones). The box keeps its aspect ratio and fills the card. */
:is(.courses-list-view, .course-details-card, .instructor-1, .compare-card) .courses-card .courses-card-body .courses-card-image,
.instructor-1 .courses-card-body .courses-card-image { width: 100%; flex: 0 0 auto; }
:is(.courses-list-view, .course-details-card, .instructor-1, .compare-card) .eGridCourse .courses-card-image img,
.instructor-1 .courses-card-body .courses-card-image > img { height: 100% !important; width: 100%; object-fit: cover; }
/* The Bootstrap row inside .courses-card has negative margins; overflow:hidden on the wrapper only clipped card shadows. */
html body :is(.courses-list-view, .course-details-card, .instructor-1) .grid-view-body > .courses-card,
html body .course-details-card .courses-card,
html body .instructor-1 .grid-view-body .courses-card { overflow: visible; }
/* Titles are no longer cut to two lines without an ellipsis: the card grows with the title. */
:is(.courses-list-view, .course-details-card, .instructor-1) .grid-view-body .courses-text h3.uos-card-title { height: auto; min-height: 48px; overflow: visible; display: block; -webkit-line-clamp: unset; }
:is(.courses-list-view, .course-details-card, .instructor-1, .compare-card) .courses-card .courses-card-body .courses-text { padding: clamp(12px, 6.3cqi, 16px); min-width: 0; }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card-body .courses-text h3.uos-card-title { font-size: clamp(14px, 6.3cqi, 16px); line-height: 1.5; overflow-wrap: anywhere; }
:is(.courses-list-view, .course-details-card, .instructor-1, .compare-card) .courses-card .courses-card-body .courses-text p,
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card .courses-card-body .courses-text .review-icon p { font-size: clamp(12px, 5.5cqi, 14px); }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card-body .courses-price-left .uos-card-price { font-size: clamp(15px, 7.1cqi, 18px); }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card-body .courses-price-left h5 { font-size: clamp(15px, 7.1cqi, 18px); }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card-body .enrollBtn { font-size: clamp(12px, 5.5cqi, 14px); padding: clamp(5px, 2.4cqi, 6px) clamp(10px, 5.9cqi, 15px); }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card .courses-card-body .courses-card-image .courses-card-image-text { font-size: clamp(12px, 5.5cqi, 14px); top: clamp(10px, 6.3cqi, 16px); left: clamp(10px, 6.3cqi, 16px); }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card-body .course-level { font-size: clamp(11px, 4.7cqi, 12px); }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card-body .courses-price { gap: 6px clamp(6px, 3cqi, 10px); }
:is(.courses-list-view, .course-details-card, .instructor-1) .courses-card-body .courses-price-left { flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
/* List layout (courses page only): the description and meta wrap instead of being cut. */
.courses-list-view .courses-list-view-card .courses-card-body .courses-text .ellipsis-line-2 { max-width: none; }
.courses-list-view .courses-list-view-card-body .courses-text { min-width: 0; }
@media (max-width: 991.98px) {
    .courses-list-view .courses-list-view-card-body .courses-card-image img { height: 100%; max-height: none; }
    .courses-list-view .eListCourse .courses-price-left { position: static; margin: 8px 0 4px; }
    .courses-list-view .courses-list-view-card-body .courses-text .courses-price { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   2. Courses page (/home/courses): sorting bar, filters, pagination
   ============================================================ */
.courses-list-view .col-lg-9 { min-width: 0; }
.courses-list-view .list-card-control.mt-5 { margin-top: clamp(20px, 4vw, 48px) !important; }
.courses-list-view .list-card-control p { font-size: clamp(13px, .8rem + .1vw, 14px); }
@media (max-width: 575.98px) {
    .courses-list-view .etopCourseHead { flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; }
    .courses-list-view .etopCourseHead .list-btn { margin: 0; }
    .courses-list-view .etopCourseHead .select-box { float: none; margin: 0 0 0 auto; }
    .courses-list-view .select-box .nice-select { width: auto; min-width: 150px; }
}
@media (max-width: 420px) {
    .courses-list-view .grid-view-body p { margin-bottom: 8px; margin-left: 0; }
    .courses-list-view .grid-view-body .select-box { margin-top: 0; margin-bottom: 0; }
}
.courses-list-view .pagenation-items { padding-bottom: clamp(24px, 5.9vw, 70px); }
/* Filter panel: radios are easy to hit (20px on desktop, 24px on phones and touch screens); labels wrap. */
.courses-list-view .uos-filter-canvas .form-check-input { width: 20px; height: 20px; margin-top: .05em; flex: 0 0 auto; }
.courses-list-view .uos-filter-canvas .course-category .form-check-label { min-width: 0; gap: 8px; }
.courses-list-view .uos-filter-canvas .course-category .form-check-label > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.courses-list-view .uos-filter-canvas .course-category .form-check-label > span:last-child { flex: 0 0 auto; }
@media (max-width: 991.98px), (pointer: coarse) {
    .courses-list-view .uos-filter-canvas .form-check-input { width: 24px; height: 24px; margin-top: -.05em; }
    .courses-list-view .uos-filter-canvas .course-category .form-check { padding-left: 32px; }
    .courses-list-view .uos-filter-canvas .course-category .form-check-input { margin-left: -32px; }
    .courses-list-view .uos-filter-canvas .course-all-category .course-category .webdesign.less { max-height: 324px; }
    .courses-list-view .uos-filter-canvas .course-icon .form-check { margin: 10px 0 10px 32px; }
    .courses-list-view .uos-filter-canvas .course-icon .form-check-input { margin-left: -32px; }
    .courses-list-view .uos-filter-canvas .course-category .show-more-less-btn,
    .courses-list-view .uos-filter-canvas .course-category .show-more button { display: inline-flex; align-items: center; min-height: 32px; }
}

/* ============================================================
   3. Course page (/home/course/<slug>/<id>)
   ============================================================ */
.courses-details .courses-details-1st-text h1 { overflow-wrap: anywhere; margin-top: clamp(14px, 2.5vw, 30px); margin-bottom: clamp(12px, 1.7vw, 20px); }
.courses-details .courses-details-1st-text > p { font-size: clamp(14px, .8rem + .5vw, 16px); margin-bottom: clamp(14px, 2vw, 24px); }
.courses-details .courses-details-1st-text .review { margin-bottom: clamp(20px, 3.4vw, 40px); }
.courses-details .course-heading-info { flex-wrap: wrap; row-gap: 4px; }
.courses-details .course-heading-info .info-tag { margin-right: clamp(10px, 1.5vw, 18px); max-width: 100%; min-width: 0; }
.courses-details .course-heading-info .info-tag p { overflow-wrap: anywhere; }
.courses-details .course-heading-info .info-tag .created-by-instructor { display: inline-flex; align-items: center; min-height: 24px; }
.courses-details .nBread { margin-bottom: 0; }
.courses-details .nBread a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 991.98px), (pointer: coarse) {
    .courses-details .nBread .breadcrumb-item { display: inline-flex; align-items: center; min-height: 32px; }
    .courses-details .nBread a { min-height: 32px; }
}
/* The tab box is the container for everything inside it. */
.course-decription .col-lg-8 { min-width: 0; }
.course-decription .course-left-side { container-type: inline-size; min-width: 0; padding: clamp(14px, 1.7vw, 20px); }
.course-decription .course-left-side li .nav-link { font-size: clamp(13px, 2.2cqi + 6px, 16px); white-space: nowrap; }
.course-decription .course-left-side li .nav-link svg { width: clamp(16px, 1.25em, 20px); height: auto; }
@media (max-width: 767.98px) {
    .course-decription #myTab { justify-content: flex-start; gap: 0 clamp(8px, 2cqi, 24px); }
    .course-decription #myTab .nav-item { flex: 0 1 auto; }
    .course-decription .course-left-side li .nav-link { padding-bottom: 9px; }
}
.course-decription .course-left-side .course-description { font-size: clamp(14px, 2cqi + 8px, 15px); }
.course-decription .course-left-side .course-description h3.description-head { font-size: clamp(17px, 2.5cqi + 9px, 20px); margin-top: clamp(16px, 3.6cqi, 24px); margin-bottom: clamp(10px, 2.4cqi, 16px); }
.course-decription .course-left-side .course-description p,
.course-decription .course-left-side .course-description li { overflow-wrap: anywhere; }
.course-decription .course-left-side .course-description img,
.course-decription .course-left-side .course-description iframe,
.course-decription .course-left-side .course-description video,
.course-decription .course-left-side .course-description table { max-width: 100%; }
.course-decription .course-left-side .course-description pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.course-decription .course-left-side .faq.accordion-button { font-size: clamp(15px, 2cqi + 9px, 18px); }
/* Curriculum. The theme's bordered, overflow-hidden accordion items left the old chevron (pulled 37px left) half cut off by
   the left border, the lesson icons sitting on that border and the durations touching the right one. The chevron, the
   lesson icons and the section title now share one inset (--cur-x) inside the box at every width. */
.course-decription .course-left-side .curriculum-accordion { --cur-x: clamp(12px, 2.4cqi, 16px); }
.course-decription .course-left-side .curriculum-accordion .accordion-button { padding-left: calc(var(--cur-x) + 21px); }
.course-decription .course-left-side .curriculum-accordion .accordion-button::after,
.course-decription .course-left-side .curriculum-accordion .accordion-button.collapsed::after { left: calc(var(--cur-x) - 9px); margin: auto 0; top: 0; bottom: 10px; }
.course-decription .course-left-side .curriculum-accordion .ac-lecture { padding: 0 20px 0 calc(var(--cur-x) - 1px); }
.course-decription .course-left-side .curriculum-accordion .accordion-button { font-size: clamp(13px, 1.6cqi + 8px, 14px); }
.course-decription .course-left-side .curriculum-accordion .accordion-item-title { min-width: 0; max-width: 100%; }
.course-decription .course-left-side .curriculum-accordion .accordion-item-title span { overflow-wrap: anywhere; }
.course-decription .course-left-side .curriculum-accordion .row.w-100 { row-gap: 4px; }
.course-decription .course-left-side .ac-lecture .uos-lesson-link span { font-size: clamp(14px, 1.5cqi + 10px, 15px); overflow-wrap: anywhere; }
.course-decription .course-left-side .ac-lecture .uos-lesson-link i { margin-right: clamp(8px, 1.8cqi, 12px); font-size: clamp(16px, 1.8cqi + 10px, 18px); }
.course-decription .course-left-side .ac-lecture .uos-lesson-row { flex-wrap: wrap; row-gap: 2px; }
.course-decription .course-left-side .ac-lecture .uos-lesson-preview { min-height: 28px; display: inline-flex; align-items: center; }
/* The title takes the space the Preview badge and the duration leave (a long title wraps inside its own box) instead of
   pushing them onto a second line in some rows and not in others; nothing is clamped. */
.course-decription .course-left-side .ac-lecture .uos-lesson-link { flex: 1 1 0; }
.course-decription .course-left-side .ac-lecture .uos-lesson-link > span { overflow: visible; -webkit-line-clamp: unset; }
/* Narrow tab box (phones up to about 430px): every lesson with a Preview badge puts the badge and the duration on a
   second line, indented under the title text, so all rows share one layout. */
@container (max-width: 400px) {
    .course-decription .course-left-side .ac-lecture .uos-lesson-row:has(.uos-lesson-preview) .uos-lesson-link { flex: 1 0 100%; min-height: 36px; }
    .course-decription .course-left-side .ac-lecture .uos-lesson-row:has(.uos-lesson-preview) .uos-lesson-preview { margin-left: calc(clamp(16px, 1.8cqi + 10px, 18px) + clamp(8px, 1.8cqi, 12px)); }
    .course-decription .course-left-side .ac-lecture .uos-lesson-row:has(.uos-lesson-preview) { padding-bottom: 8px; }
}
/* Instructor tab */
.course-decription .course-left-side .instructor .instructor-text h2 { font-size: clamp(16px, 1.7cqi + 7px, 18px); overflow-wrap: anywhere; }
.course-decription .course-left-side .instructor .instructor-text p { font-size: clamp(14px, 1.7cqi + 5px, 16px); margin-left: 0; }
.course-decription .course-left-side .instructor .instructor-text .font-inter-light { font-size: clamp(14px, 1.5cqi + 5px, 15px); }
.course-decription .course-left-side .instructor .instructor-icon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.course-decription .course-left-side .instructor .instructor-icon i { margin: 0; }
.course-decription .course-left-side .instructor .instructor-img img { height: clamp(96px, 24cqi, 160px); }
/* Reviews */
.course-decription .course-left-side .reviews .studentInforeview { min-width: 0; }
.course-decription .course-left-side .reviews .ereviewtext { min-width: 0; flex: 1 1 auto; }
.course-decription .course-left-side .reviews .ereviewtext h3 { font-size: clamp(15px, 1.5cqi + 6px, 16px); overflow-wrap: anywhere; }
.course-decription .course-left-side .reviews .ereviewtext p.text { overflow-wrap: anywhere; }
.course-decription .course-left-side .reviews .eReviewContent { flex-wrap: wrap; align-items: center; }
/* Sidebar card: the card itself is the container */
.course-decription .course-right-section { min-width: 0; }
.course-decription .course-right-section .course-card { container-type: inline-size; min-width: 0; }
.course-decription .course-right-section .course-details-sidebar { padding: clamp(12px, 4.1vw, 16px); }
.course-decription .course-right-section .course-card .enrol .icon h4,
.course-decription .course-right-section .course-card .enrol > h5 { font-size: min(clamp(14px, 5.2cqi, 16px), clamp(0.912rem,0.878rem + 0.152vw,1rem)); overflow-wrap: anywhere; }
.course-decription .course-right-section .course-card .enrol { gap: 8px; padding: clamp(11px, 4.8cqi, 15px) 0; }
.course-decription .course-right-section .course-card .enrol .icon svg { width: clamp(16px, 6.4cqi, 20px); height: auto; flex: 0 0 auto; }
.course-decription .course-right-section .course-card .ammount { align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.course-decription .course-right-section .course-card .ammount .uos-price { font-size: clamp(20px, 7.7cqi, 24px); }
.course-decription .course-right-section .course-card .ammount .uos-price-old { font-size: clamp(15px, 5.8cqi, 18px); padding: 4px clamp(4px, 3.2cqi, 10px); }
.course-decription .course-right-section .course-card .ammount .echecks { flex: 0 0 auto; }
.course-decription .course-right-section .button a,
.course-decription .course-right-section .button button { font-size: clamp(14px, 4.8cqi, 15px); padding: clamp(9px, 3.2cqi, 10px) clamp(10px, 4.5cqi, 14px) clamp(10px, 3.9cqi, 12px); margin-top: clamp(10px, 4.5cqi, 14px); white-space: normal; }
.course-decription .course-right-section .course-card .uos-prereq-box h4 { font-size: clamp(14px, 4.8cqi, 15px) !important; }
.course-decription .course-right-section .course-card .uos-prereq-box li { font-size: clamp(13px, 4.5cqi, 14px) !important; overflow-wrap: anywhere; }
.course-decription .course-right-section .course-card .uos-prereq-box li a { min-width: 0; }
.course-decription .course-right-section .eSocialShare { container-type: inline-size; flex-wrap: wrap; gap: 8px 0; padding: clamp(14px, 1.7vw, 20px); }
.course-decription .course-right-section .eSocialShare p { font-size: min(clamp(14px, 5.3cqi, 16px), clamp(0.9rem,0.861rem + 0.174vw,1rem)); margin: 0 clamp(10px, 5.9cqi, 18px) 0 0; }
.course-decription .course-right-section .eSocialShare a { flex: 0 0 auto; }
.course-details-card .uos-section-title { overflow-wrap: anywhere; }
.course-details-card .courses-card.mt-4 { margin-top: clamp(12px, 2vw, 24px) !important; }
.course-details-card.mt-5 { margin-top: clamp(24px, 4vw, 48px) !important; }

/* ============================================================
   4. Hub pages (/learn, /topics; the same template serves /practice and /explore/community)
   ============================================================ */
.uhub .container { min-width: 0; }
.uhub-hero p { font-size: clamp(15px, .9rem + .55vw, 1.08rem); }
.uhub-hero .uhub-note { font-size: clamp(14px, .85rem + .3vw, .95rem); }
.uhub-h2 { font-size: clamp(1.1rem, 1rem + .5vw, 1.25rem); overflow-wrap: anywhere; }
.uhub-cards > li { container-type: inline-size; min-width: 0; }
.uhub-card { min-width: 0; }
.uhub-art { padding: clamp(6px, 3.8cqi, 10px) clamp(8px, 4.5cqi, 12px) 0; }
.uhub-card-body { padding: clamp(10px, 5.3cqi, 14px) clamp(10px, 6cqi, 16px) clamp(10px, 6cqi, 16px); gap: clamp(3px, 1.9cqi, 5px); }
.uhub-card-body strong { font-size: clamp(14px, 6.3cqi, 1.04rem); gap: clamp(5px, 3cqi, 8px); overflow-wrap: anywhere; }
.uhub-card-body small { font-size: clamp(12.5px, 5.6cqi, .93rem); overflow-wrap: anywhere; }
.uhub-go { font-size: clamp(12px, 5.4cqi, .9rem); }
.uhub-card .uhub-lock { font-size: clamp(11px, 5.2cqi, .85rem); line-height: 1.35; }
.uhub-chips a { font-size: clamp(14px, .8rem + .4vw, 16px); padding: 0 clamp(12px, 2.2vw + 6px, 18px); text-align: center; }
.uhub-chips { gap: clamp(8px, 2.5vw, 10px); }
.uhub-crumbs ol { font-size: clamp(.85rem, .8rem + .2vw, .9rem); }
.uhub-empty { overflow-wrap: anywhere; }

/* ============================================================
   5. Topic pages (/topics/<topic>): main.uhub.sbx
   ============================================================ */
.uhub.sbx .tp-hero { flex-wrap: wrap; }
.uhub.sbx .tp-hero > div { min-width: 0; flex: 1 1 260px; }
.uhub.sbx .tp-art { max-width: 100%; }
.uhub.sbx .tp-hero p { font-size: clamp(14px, .85rem + .35vw, 1rem); }
.uhub.sbx .tp-links { gap: clamp(8px, 1.5vw, 16px) clamp(10px, 1.5vw, 16px); }
.uhub.sbx .tp-links a { display: inline-flex; align-items: center; font-size: clamp(14px, .85rem + .35vw, 1rem); }
.uhub.sbx .tp-ctf-link { font-size: clamp(14px, .85rem + .35vw, 1rem); }
.uhub.sbx .tp-section > p.uos-muted { font-size: clamp(14px, .85rem + .35vw, 1rem); }
@media (max-width: 991.98px), (pointer: coarse) {
    .uhub.sbx .tp-links a, .uhub.sbx .tp-ctf-link { min-height: 32px; }
    /* "Log in" / "join free" inside the section intro: the same text, a 24px+ tap box (padding, pulled back by negative margins so lines do not move). */
    .uhub.sbx .tp-section > p.uos-muted > a { display: inline-block; padding: 4px 2px; margin: -4px 0; }
}
.uhub.sbx .sbx-tasks > li { container-type: inline-size; min-width: 0; }
.uhub.sbx .sbx-task { min-width: 0; padding: clamp(12px, 6cqi, 16px); }
/* .sbx-task is itself an inline-size container (uos-lab.css), so its children's cqi is the card's content box (237px on a 1440px desktop). */
.uhub.sbx .sbx-task strong { font-size: clamp(14px, 7.2cqi, 1.03rem); overflow-wrap: anywhere; }
.uhub.sbx .sbx-task small { font-size: clamp(12.5px, 6.3cqi, .9rem); overflow-wrap: anywhere; }
.uhub.sbx .sbx-task-top { flex-wrap: wrap; row-gap: 4px; }
.uhub.sbx .sbx-meta { font-size: clamp(11px, 5.6cqi, .8rem); }
.uhub.sbx .sbx-pill { font-size: clamp(11px, 5.3cqi, .75rem); height: auto; min-height: 22px; line-height: 1.3; padding: 0 clamp(7px, 3.9cqi, 9px); }
.uhub.sbx .sbx-status { font-size: clamp(12px, 6.2cqi, .88rem); flex-wrap: wrap; }
.uhub.sbx .rs-list > li { container-type: inline-size; min-width: 0; padding: clamp(12px, 3.6vw, 14px) clamp(12px, 4.1vw, 16px); }
.uhub.sbx .rs-list a { overflow-wrap: anywhere; font-size: clamp(15px, 6cqi, 1rem); }
.uhub.sbx .rs-list span { font-size: clamp(13px, 5.5cqi, .92rem); }
.uhub.sbx .rs-list small { font-size: clamp(11px, 4.7cqi, .78rem); }
.uhub.sbx .tp-other .uhub-chips a { max-width: 100%; }
@media (max-width: 767px) {
    .uhub.sbx .tp-art { width: min(200px, 100%); }
}

/* ============================================================
   6. Learning paths (/paths, /paths/<slug>): page classes set in uos_paths.php and uos_path.php
   ============================================================ */
.uos-paths-page .uos-grid-3 { gap: clamp(12px, 1.5vw, 16px); }
.uos-paths-page .uos-path-cell { container-type: inline-size; display: flex; min-width: 0; }
.uos-paths-page .uos-feature { width: 100%; min-width: 0; padding: clamp(16px, 6.2cqi, 22px); gap: clamp(6px, 2.3cqi, 8px); }
.uos-paths-page .uos-feature-icon { width: clamp(40px, 13.9cqi, 50px); height: clamp(40px, 13.9cqi, 50px); font-size: clamp(17px, 5.9cqi, 21px); border-radius: clamp(12px, 4.2cqi, 15px); }
.uos-paths-page .uos-feature h3 { font-size: clamp(16px, 5cqi, 18px); overflow-wrap: anywhere; }
.uos-paths-page .uos-feature p { font-size: clamp(13px, 3.9cqi, 14px); overflow-wrap: anywhere; }
.uos-paths-page .uos-empty p { overflow-wrap: anywhere; }
.uos-path-page .uos-hero h1 { overflow-wrap: anywhere; }
.uos-path-page .uos-steps > li { container-type: inline-size; min-width: 0; padding-left: clamp(38px, 4vw, 44px); }
.uos-path-page .uos-steps > li > div { min-width: 0; }
.uos-path-page .uos-steps strong { font-size: clamp(15px, 2cqi + 9px, 16px); overflow-wrap: anywhere; }
.uos-path-page .uos-steps small { font-size: clamp(13px, 1.5cqi + 9px, 14px); overflow-wrap: anywhere; }
.uos-path-page .uos-steps .uos-btn-sm { white-space: normal; text-align: center; }
.uos-path-page .uos-link { overflow-wrap: anywhere; }
@media (max-width: 991.98px), (pointer: coarse) {
    .uos-path-page .uos-steps .uos-btn-sm { min-height: 36px; }
}

/* ============================================================
   7. Levels (/levels): the ladder cards (base styles live in uos_levels.php)
   ============================================================ */
.lv-wrap .uos-hero h1 { overflow-wrap: anywhere; }
.lv-me > .uos-card { container-type: inline-size; min-width: 0; padding: clamp(14px, 4.7vw, 18px); }
.lv-me strong { font-size: clamp(15px, 1.2cqi + 12px, 17px); overflow-wrap: anywhere; }
.lv-me small { font-size: clamp(13px, 1cqi + 10px, 14px); }
.lv-step { container-type: inline-size; min-width: 0; padding: clamp(14px, 1.5vw, 18px); gap: clamp(10px, 1.2vw, 14px); grid-template-columns: clamp(44px, 4.4vw, 52px) minmax(0, 1fr); }
.lv-step > div { min-width: 0; }
.lv-ico { width: clamp(44px, 4.4vw, 52px); height: clamp(44px, 4.4vw, 52px); font-size: clamp(17px, 1.7vw, 20px); border-radius: clamp(12px, 1.2vw, 14px); }
.lv-head h2 { font-size: clamp(16px, 1.3cqi + 11px, 18px); overflow-wrap: anywhere; }
.lv-num { font-size: clamp(13px, .8cqi + 10px, 14px); }
.lv-era { font-size: clamp(12.5px, .6cqi + 10px, 13px); }
.lv-meaning { font-size: clamp(14px, .6cqi + 12px, 16px); }
.lv-cols { gap: clamp(10px, 1.8cqi, 14px); }
.lv-cols h3 { font-size: clamp(13px, .8cqi + 10px, 14px); }
.lv-cols ul, .lv-cols p { font-size: clamp(13.5px, .7cqi + 11px, 14px); }
.lv-need .uos-chip { font-size: clamp(12px, .6cqi + 10px, 13px); padding: clamp(5px, 1cqi, 7px) clamp(10px, 2.2cqi, 14px); white-space: normal; }
.lv-state { font-size: clamp(11px, .5cqi + 9px, 12px); }
.lv-wrap .uos-alert { overflow-wrap: anywhere; }
.lv-wrap .uos-alert-info a { display: inline-block; padding: 4px 2px; margin: -4px 0; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 640px) {
    .lv-step { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   8. Certificate pages (/verify, /verify/<code>): uos_certificate.php is shared, so these rules key on the page's own blocks
   ============================================================ */
.uos-page:has(> .container > .cb-print-area) .container,
.uos-page:has(> .container > .uos-cert) .container,
.uos-page:has(> .container > .uos-card > form[action$="verify"]) .container { min-width: 0; }
.uos-page .uos-card > h1 + form.uos-form .uos-btn { flex: 0 0 auto; }
.uos-page .uos-card > form[action$="verify"] .uos-input { min-width: min(220px, 100%); }
.uos-page .uos-card > h1[style] { font-size: clamp(20px, 1rem + 1.1vw, 24px) !important; overflow-wrap: anywhere; }
.uos-page .uos-alert.uos-no-print { align-items: center; }
.uos-page .uos-alert.uos-no-print > div { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
@media (max-width: 639.98px) {
    .uos-page .uos-alert.uos-no-print { flex-wrap: wrap; }
    .uos-page .uos-alert.uos-no-print > .uos-btn { flex: 1 0 100%; margin-left: 0 !important; justify-content: center; min-height: 40px; }
}
/* The branded certificate is an A4 landscape document whose text is 1.6% of its width. Below 992px it keeps a readable
   800px width inside its own sideways scroller instead of shrinking to a thumbnail with 4px text. */
@media (max-width: 991.98px) {
    .uos-page .cb-print-area { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) / 2); padding: 0 calc(var(--bs-gutter-x, 1.5rem) / 2) 24px; scrollbar-width: thin; }
    .uos-page .cb-print-area .cb-wrap { min-width: 800px; }
}
@media (max-width: 839.98px) {
    .uos-page .cb-print-area::before { content: "Swipe sideways to see the whole certificate"; display: block; position: sticky; left: 0; margin: 0 0 8px; font-size: 14px; color: var(--uos-muted); }
}
/* Fallback certificate (no template): paddings and the frame scale with the screen */
.uos-page .uos-cert { padding: clamp(20px, 4.7vw, 56px) clamp(14px, 4vw, 48px); outline-offset: clamp(-22px, -1.9vw, -10px); border-width: clamp(6px, .85vw, 10px); }
.uos-page .uos-cert .uos-cert-meta { margin-top: clamp(20px, 3.4vw, 40px); gap: 12px clamp(12px, 1.7vw, 20px); }
.uos-page .uos-cert .uos-cert-meta > div { min-width: 0; overflow-wrap: anywhere; }
.uos-page .uos-cert p[style*="font-size:17px"] { font-size: clamp(15px, .85rem + .3vw, 17px) !important; }
.uos-page .uos-cert .uos-cert-name { overflow-wrap: anywhere; }
.uos-page .uos-cert-revoked { right: 0; }

/* ============================================================
   9. Compare courses (/home/compare)
   ============================================================ */
.compare-card { padding: clamp(24px, 5vw, 60px) 0; }
.compare-card .courses-card { overflow: visible; }
.compare-card .uos-section-title { overflow-wrap: anywhere; }
.compare-card .row { row-gap: clamp(12px, 1.7vw, 24px); }
.compare-card .empty-card { height: auto; min-height: 340px; }
/* One card per row on phones: the picker has no neighbour card to match in height, so it ends after its last select. */
@media (max-width: 575.98px) { .compare-card .empty-card { min-height: 0; margin-bottom: 0; } }
.compare-card .empty-card.p-4 { padding: clamp(12px, 2vw, 24px) !important; }
.compare-card .empty-card .card-body { font-size: clamp(12px, .7rem + .15vw, 13px); }
.compare-card .empty-card .select2-container { width: 100% !important; max-width: 100%; }
/* The 44px line box sat inside 6px of top padding, so "Select a course" hung 6px below the middle of its 46px field. */
.compare-card .empty-card .select2-container .select2-selection--single { padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
.compare-card .empty-card .select2-container .select2-selection--single .select2-selection__rendered { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-card .courses-card-body .courses-text { min-width: 0; }
.compare-card .courses-card-body .courses-text > a { display: block; min-width: 0; }
.compare-card .card h3 { font-size: clamp(14px, 6.6cqi, 16px); overflow-wrap: anywhere; }
.compare-card .card p { font-size: clamp(11px, 5cqi, 12px); }
.compare-card .card a { font-size: clamp(11px, 5cqi, 12px); }
.compare-card .card .courses-text > .d-flex { flex-wrap: wrap; gap: 4px 8px; }
.compare-card .card .courses-text > .d-flex > a { display: inline-flex; align-items: center; min-height: 24px; }
.compare-card .card img { height: clamp(120px, 81cqi, 196px); object-fit: cover; }
.compare-table { padding-bottom: clamp(40px, 8.4vw, 100px); }
.compare-2 .compare-2-table { padding: 8px clamp(12px, 2.5vw, 30px); overscroll-behavior-x: contain; }
.compare-table .table th { font-size: clamp(14px, .85rem + .15vw, 15px); padding-top: clamp(14px, 2.5vw, 30px); padding-bottom: clamp(14px, 2.5vw, 30px); min-width: clamp(130px, 14vw, 200px); white-space: normal; }
.compare-table .table td { padding-top: clamp(14px, 2.5vw, 30px); padding-bottom: clamp(14px, 2.5vw, 30px); min-width: clamp(150px, 14vw, 200px); }
.compare-table .table th i { margin-right: clamp(8px, 1.4vw, 16px); }

/* ============================================================
   10. Shopping cart (/home/shopping_cart)
   ============================================================ */
.cart-page { padding: clamp(24px, 4.2vw, 50px) 0 clamp(32px, 5.9vw, 70px); }
.cart-page .col-lg-9, .cart-page .col-lg-3 { min-width: 0; }
.cart-page .cart-table .cart-heading-text h3 { font-size: clamp(20px, 1rem + 1vw, 28px); margin-bottom: clamp(12px, 1.7vw, 20px); }
.cart-page .cart-scroll-bar { overscroll-behavior-x: contain; }
.cart-page .cart-scroll-bar .table { min-width: 520px; }
.cart-page .cart-table .table td:first-child { white-space: normal; min-width: 260px; }
.cart-page .cart-table .cart-table-image { min-width: 0; align-items: flex-start; }
.cart-page .cart-table .cart-table-image > a { min-width: 0; flex: 1 1 auto; }
.cart-page .cart-table .cart-table-image img { flex: 0 0 auto; width: 88px; object-fit: cover; }
.cart-page .cart-table h5 { font-size: clamp(14px, .8rem + .2vw, 15px); overflow-wrap: anywhere; margin-top: 0; }
.cart-page .cart-table .table td.d-flex { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cart-page .cart-table .table td.d-flex h6 { margin: 0 !important; }
.cart-page .cart-table .table .uos-icon-plain { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.cart-page .cart-total { margin-top: clamp(20px, 6.7vw, 80px); padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.95vw, 23px); container-type: inline-size; min-width: 0; }
.cart-page .cart-total h4 { font-size: clamp(16px, 8.7cqi, 18px); margin-bottom: clamp(14px, 10.6cqi, 22px); }
.cart-page .cart-total h6 { font-size: clamp(13px, 6.8cqi, 14px); }
.cart-page .cart-total .tax, .cart-page .cart-total .sub-total { gap: 8px; }
.cart-page .cart-total .tax h6:last-child, .cart-page .cart-total .sub-total h6:last-child { text-align: right; }
.cart-page .cart-total .input-group .btn-primary { white-space: nowrap; }
.cart-page .cart-total form .btn.w-100 { white-space: normal; }
.cart-page .uos-empty-block .btn { white-space: normal; }

/* ============================================================
   11. Instructor page (/home/instructor_page/<id>)
   ============================================================ */
.instructor-1 { padding-top: clamp(24px, 4.2vw, 50px); }
.instructor-1 .col-lg-8, .instructor-1 .col-lg-4 { min-width: 0; }
.instructor-1 .instructor-about { padding: clamp(18px, 3.3vw, 39px) clamp(14px, 2.5vw, 30px); margin-bottom: clamp(30px, 10vw, 120px); container-type: inline-size; min-width: 0; }
.instructor-1 .instructor-about .pro-heading { align-items: flex-start; min-width: 0; }
.instructor-1 .instructor-about .pro-heading .pro-img { flex: 0 0 auto; }
.instructor-1 .instructor-about .pro-heading .pro-img img { height: clamp(76px, 16.2cqi, 110px) !important; max-width: 100%; }
.instructor-1 .instructor-about .pro-heading .name { margin: 0 clamp(12px, 3.6cqi, 24px) 13px; min-width: 0; }
.instructor-1 .instructor-about .pro-heading .name h4 { font-size: clamp(16px, 1.2cqi + 10px, 18px); overflow-wrap: anywhere; }
.instructor-1 .instructor-about .pro-heading .name p { font-size: clamp(13px, .9cqi + 8px, 14px); overflow-wrap: anywhere; }
.instructor-1 .instructor-about .rating h4 { font-size: clamp(16px, 1.2cqi + 10px, 18px); }
.instructor-1 .instructor-about .rating p { font-size: clamp(13px, .9cqi + 8px, 14px); }
.instructor-1 .instructor-about .rating .rating-point { flex-wrap: wrap; align-items: center; }
.instructor-1 .instructor-about .about-text { margin-top: clamp(18px, 4.4cqi, 30px); margin-bottom: clamp(24px, 7.4cqi, 50px); }
.instructor-1 .instructor-about .about-text h3,
.instructor-1 .instructor-about .skill h3 { font-size: clamp(16px, 1.2cqi + 10px, 18px); margin-bottom: clamp(12px, 3cqi, 20px); }
.instructor-1 .instructor-about .about-text p,
.instructor-1 .instructor-about .skill p { font-size: clamp(14px, .75cqi + 10px, 15px); overflow-wrap: anywhere; }
.instructor-1 .instructor-about .about-text img, .instructor-1 .instructor-about .about-text iframe, .instructor-1 .instructor-about .about-text table { max-width: 100%; }
.instructor-1 .instructor-about .about-text ul li a { margin: 0 clamp(8px, 2.4cqi, 16px) clamp(8px, 2.1cqi, 14px) 0; padding: clamp(6px, 1.2cqi, 8px) clamp(12px, 2.7cqi, 18px); font-size: clamp(13px, .9cqi + 8px, 14px); }
.instructor-1 .instructor-about .skill .skill-point { flex-wrap: wrap; gap: clamp(12px, 3vw, 40px) clamp(20px, 9.7cqi, 66px); margin-top: clamp(18px, 4.4cqi, 30px); margin-bottom: clamp(18px, 4.4cqi, 30px); }
.instructor-1 .instructor-about .skill .skill-point .skill-point-1 { margin: 0 0 0 1px; min-width: 0; }
.instructor-1 .instructor-about .skill .skill-point .skill-point-1::after { left: calc(-.5 * clamp(20px, 9.7cqi, 66px)); }
.instructor-1 .skill-point-1 .uos-stat-num { font-size: clamp(24px, 1.2rem + 1.1vw, 32px); }
.instructor-1 .skill-point-1 .uos-stat-label { font-size: clamp(13px, .8rem + .2vw, 15px); }
.instructor-1 .instructor-about .about-text.mt-5 { margin-top: clamp(24px, 7.1cqi, 48px) !important; }
.instructor-1 .instructor-about .about-text h3.mb-4.pb-3 { margin-bottom: clamp(8px, 3.6cqi, 24px) !important; padding-bottom: clamp(6px, 2.4cqi, 16px) !important; }
.instructor-1 .instructor-right { container-type: inline-size; min-width: 0; }
.instructor-1 .instructon-contact .instructon-icon { margin: clamp(14px, 6.2cqi, 22px) clamp(10px, 4.8cqi, 17px) 0; min-width: 0; align-items: flex-start; }
.instructor-1 .instructon-contact .instructon-icon i { font-size: clamp(20px, 7.6cqi, 27px); margin: 8px clamp(12px, 8.4cqi, 30px) 12px clamp(6px, 4.8cqi, 17px); flex: 0 0 auto; }
.instructor-1 .instructon-contact .instructon-number { min-width: 0; }
.instructor-1 .instructon-contact .instructon-icon h4 { font-size: clamp(13px, .9cqi + 11px, 14px); }
.instructor-1 .instructon-contact .instructon-icon p { font-size: clamp(13px, .9cqi + 11px, 14px); overflow-wrap: anywhere; }
.instructor-1 .instructon-contact .social-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: clamp(13px, .9cqi + 11px, 14px); text-decoration: none; }
.instructor-1 .instructor-right .instructor-msg { margin-bottom: clamp(12px, 14.1cqi, 50px); }
.instructor-1 .instructor-right .instructor-msg .btn { margin-top: clamp(14px, 8.5cqi, 30px); font-size: clamp(14px, .85rem + .2vw, 16px); }
.instructor-1 .instructor-right .follow-btn { font-size: clamp(13px, .8rem + .1vw, 14px); }
@media (max-width: 767.98px) {
    .instructor-1 .instructor-about .rating { float: none; margin: 10px 0 0; }
    .instructor-1 .instructor-about .rating .rating-point { justify-content: flex-start; }
    .instructor-1 .instructor-about .eBadges { justify-content: flex-start !important; }
}

/* ============================================================
   12. Breadcrumb banner (breadcrumb.php) on this group's pages: courses, cart, instructor
   ============================================================ */
body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb h1 { margin-left: 0; margin-bottom: clamp(16px, 3.9vw, 56px); overflow-wrap: anywhere; }
body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb .breadcrumb { flex-wrap: wrap; align-items: center; row-gap: 4px; }
body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb .breadcrumb-item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb .breadcrumb-item span { overflow-wrap: anywhere; }
/* The old theme pushed the icons and the current item down with uneven top paddings (20px / 15px), so "Home" sat 10px
   below the current page name. Every crumb now centres on one line. */
body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb .breadcrumb > li { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; min-height: clamp(40px, 3.9vw, 56px); }
body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb .breadcrumb > li i { padding-top: 0; padding-bottom: 0; }
body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb .breadcrumb-item a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 991.98px), (pointer: coarse) {
    body:has(.courses-list-view, .cart-page, .instructor-1) .bread-crumb .breadcrumb-item a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
}