/* Flex v7: refinements for Guru 6.3 markup, Bootstrap 5 and narrow screens.
   All rules are confined to Guru so Joomla and SP Page Builder retain their styles. */
#guru-component,
.guru-mod--courses {
  min-width: 0;
  overflow-wrap: anywhere;
}
#guru-component *,
#guru-component *::before,
#guru-component *::after,
.guru-mod--courses * {
  box-sizing: border-box;
}
#guru-component img,
.guru-mod--courses img {
  max-width: 100%;
}
#guru-component :is(input, select, textarea) {
  max-width: 100%;
}
#guru-component :is(input[type="checkbox"], input[type="radio"]) {
  width: auto;
  height: auto;
  padding: 0;
  vertical-align: middle;
}
#guru-component :is(a, button, input, select, textarea):focus-visible,
.guru-mod--courses :is(a, button):focus-visible {
  outline: 3px solid #172433;
  outline-offset: 3px;
}
#guru-component :is(.uk-button, .wk-button),
#guru-component .gru-cover-purchase-btn a {
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
  line-height: 1.5;
  min-height: 44px;
  padding: 10px 16px;
}
#guru-component :is(.uk-button-primary, .wk-button-primary) {
  background-color: var(--flex-guru-accent, #f47363) !important;
  border-color: var(--flex-guru-accent, #f47363) !important;
  color: #fff !important;
}
#guru-component :is(.uk-button-primary, .wk-button-primary):is(:hover, :focus-visible) {
  background-color: var(--flex-guru-hover, #e0604f) !important;
}
#guru-component :is(button, input, .uk-button, .wk-button):disabled,
#guru-component :is(.uk-button, .wk-button)[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
/* Native Guru detail renderer, including its current access and purchase controls. */
div#guru-component .gru-default-layout > .gru-cover {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  background: #fff;
  border-radius: 6px;
  padding: 24px;
}
div#guru-component .gru-default-layout > .gru-cover > .gru-course-media {
  flex: 1 1 280px;
  min-width: 0;
  padding: 0;
}
div#guru-component .gru-default-layout > .gru-cover > .gru-course-info {
  flex: 2 1 360px;
  min-width: 0;
  padding: 0;
}
div#guru-component .gru-cover-title {
  line-height: 1.3;
  overflow-wrap: anywhere;
}
div#guru-component .gru-course-detail .tab-content {
  background: #fff;
  max-width: 100%;
  overflow-x: auto;
}
div#guru-component .gru-course-detail #guru_tabs ul:is(.uk-tab, .wk-tab) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}
div#guru-component .gru-course-detail #guru_tabs ul:is(.uk-tab, .wk-tab) > li {
  float: none;
  max-width: 100%;
}
div#guru-component .gru-course-detail #guru_tabs ul:is(.uk-tab, .wk-tab) > li > a {
  white-space: normal;
}
/* Reserve normal flow for variable-length Chinese/translated course metadata. */
div#guru-component .gru-course-item :is(.uk-panel-box, .wk-panel-box) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 16px;
}
div#guru-component .gru-course-item :is(.uk-panel-box, .wk-panel-box) .gru-course-cover {
  position: relative;
}
div#guru-component .gru-course-item :is(.uk-panel-box, .wk-panel-box) .gru-course-meta,
.guru-mod--courses .item-inner .gru-course-meta {
  position: static;
  margin-top: auto;
}
div#guru-component .gru-course-item :is(.uk-panel-box, .wk-panel-box) .gru-course-meta ul,
.guru-mod--courses .item-inner .gru-course-meta ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}
div#guru-component .gru-course-item :is(.uk-panel-box, .wk-panel-box) .gru-course-meta ul li,
.guru-mod--courses.course-business .item-inner .gru-course-meta ul li {
  flex: 1 1 80px;
  width: auto;
  line-height: 1.6;
  padding: 12px 6px;
}
div#guru-component .name-category,
.guru-mod--courses .item-inner .name-catg span {
  height: auto;
  min-height: 32px;
  line-height: 1.6;
  padding-block: 6px;
  max-width: 100%;
}
div#guru-component .gru-course-item :is(.uk-panel-box, .wk-panel-box) .gru-course-cover .name-category {
  position: static;
  transform: none;
  margin-top: 8px;
}
.guru-mod--courses .item-inner { padding-bottom: 16px; }
div#guru-component .gru-courses .gru-page-filters .gru-filter-item input {
  min-width: 0;
  width: 100%;
}
div#guru-component .gru-course-detail .tab-content :is(.uk-grid, .wk-grid) > * { min-width: 0; }
div#guru-component .tab-content .col_title.pull-left { white-space: normal; }
#guru-component ul.pagination { flex-wrap: wrap; gap: 4px; }
/* Actual Guru tabs.php markup: Flex gives every .pull-left a 20px margin,
   which makes four 25% columns overflow. Keep header and lesson cells aligned. */
div#guru-component .table-of-contents > :is(.uk-grid, .wk-grid) > .hidden-phone,
div#guru-component .lessons_wrap .lesson_name + div {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding-inline: 0;
  min-width: 0;
}
div#guru-component .table-of-contents .col_title.pull-left,
div#guru-component .lessons_wrap .lesson_name + div > .pull-left {
  float: none !important;
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  margin: 0 !important;
  padding-inline: 4px;
  overflow-wrap: anywhere;
}
div#guru-component .guru-tab-title .day {
  display: flex;
  align-items: center;
  gap: 6px;
}
div#guru-component .guru-tab-title .day::before,
div#guru-component .guru-tab-title .day::after { display: none; }
div#guru-component .guru-tab-title .day img {
  display: inline-block !important;
  flex: 0 0 auto;
  margin: 0;
}
div#guru-component .lessons_wrap .lesson_name + div > .pull-left img {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  div#guru-component { padding: 12px; }
  div#guru-component .gru-default-layout > .gru-cover { padding: 16px; gap: 16px; }
  div#guru-component .gru-default-layout > .gru-cover > :is(.gru-course-media, .gru-course-info) { flex-basis: 100%; }
  div#guru-component div.gru-list-categories :is(.uk-panel-box, .wk-panel-box) .box-info {
    position: static;
    padding: 16px;
  }
  div#guru-component .gru-courses .gru-page-filters .gru-filter-item { min-width: 0; max-width: 100%; }
  div#guru-component .gru-course-detail #guru_tabs ul:is(.uk-tab, .wk-tab) li a { padding: 10px 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  div#guru-component .gru-course-item :is(.uk-panel-box, .wk-panel-box),
  .guru-mod--courses .item-inner { transition: none; transform: none !important; }
}

/* Keep Guru's image id/src for its existing expand/collapse handlers. */
div#guru-component .guru-tab-title .day img[src*="arrow-"] {
 content:url("../images/guru-chevron.svg"); width:14px!important; height:14px!important;
 object-fit:contain; vertical-align:middle; transition:transform .16s ease;
}
div#guru-component .guru-tab-title .day img[src*="arrow-down"] {transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce) {
 div#guru-component .guru-tab-title .day img[src*="arrow-"] {transition:none}
}