/**
 * Guru frontend visual layer.
 *
 * This file intentionally keeps the legacy markup and behavior intact. All
 * rules are scoped to the public com_guru body class supplied by Joomla.
 */

body.com_guru:not(.admin) {
  --guru-site-canvas: #ffffff;
  --guru-site-surface: #ffffff;
  --guru-site-raised: #ffffff;
  --guru-site-inset: #f7f7fa;
  --guru-site-border: #e4e6e8;
  --guru-site-text: #384551;
  --guru-site-muted: #8592a3;
  --guru-site-accent: #696cff;
  --guru-site-accent-hover: #5f61e6;
  --guru-site-accent-soft: #e7e7ff;
  --guru-site-info: #03c3ec;
  --guru-site-warning: #ffab00;
  --guru-site-danger: #ff3e1d;
  --guru-site-success: #71dd37;
  --guru-site-shadow-raised: 0 3px 8px rgba(34, 48, 62, 0.1);
  --guru-site-shadow-soft: 0 2px 6px rgba(34, 48, 62, 0.08);
  --guru-site-shadow-inset: none;
  background-color: var(--guru-site-canvas);
  color: var(--guru-site-text);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:is([data-bs-theme="dark"], [data-color-scheme="dark"])
  body.com_guru:not(.admin) {
  --guru-site-canvas: #232333;
  --guru-site-surface: #2b2c40;
  --guru-site-raised: #2f3046;
  --guru-site-inset: #35364f;
  --guru-site-border: #444564;
  --guru-site-text: #d5d5e2;
  --guru-site-muted: #a3a4cc;
  --guru-site-accent: #696cff;
  --guru-site-accent-hover: #7d80ff;
  --guru-site-accent-soft: #3a3b64;
  --guru-site-info: #03c3ec;
  --guru-site-warning: #ffab00;
  --guru-site-danger: #ff3e1d;
  --guru-site-success: #71dd37;
  --guru-site-shadow-raised: 0 3px 8px rgba(15, 16, 28, 0.3);
  --guru-site-shadow-soft: 0 2px 6px rgba(15, 16, 28, 0.24);
  --guru-site-shadow-inset: none;
  color-scheme: dark;
}

body.com_guru:not(.admin) .com-content-article,
body.com_guru:not(.admin) main > .container-component,
body.com_guru:not(.admin) .site-grid > main {
  min-width: 0;
}

body.com_guru:not(.admin) :where(
  .gru-mycourses,
  .gru-mycoursesauthor,
  .gru-myorders,
  .gru-mycertificates,
  .gru-myquizzesstats,
  .gru-course-view,
  .gru-course-view-dark,
  .gru-course-container,
  .course_view,
  .guru-portal,
  .guru-quiz__wrapper,
  #the_quiz,
  #editcell
) {
  color: var(--guru-site-text);
  letter-spacing: 0;
  max-width: 100%;
}

body.com_guru:not(.admin) :where(
  .gru-mycourses,
  .gru-mycoursesauthor,
  .gru-myorders,
  .gru-mycertificates,
  .gru-myquizzesstats
) {
  padding: clamp(16px, 3vw, 30px);
  background: var(--guru-site-surface);
  border: 1px solid var(--guru-site-border);
  border-radius: 8px;
  box-shadow: var(--guru-site-shadow-raised);
}

body.com_guru:not(.admin) :where(h1, h2, h3, h4, h5, h6),
body.com_guru:not(.admin) :where(
  .gru-page-title,
  .gru-page-subtitle,
  .uk-panel-title,
  .guru-quiz__title,
  .gru-course-title
) {
  color: var(--guru-site-text);
  letter-spacing: 0;
}

body.com_guru:not(.admin) .gru-page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--guru-site-border);
  border-radius: 8px;
  background: var(--guru-site-raised);
  box-shadow: var(--guru-site-shadow-soft);
}

body.com_guru:not(.admin) :where(p, li, td, label, .uk-text-muted) {
  color: inherit;
}

body.com_guru:not(.admin) :where(
  .text-muted,
  .uk-text-muted,
  .guru-portal__header p,
  .guru-portal__course-meta,
  .guru-portal__actions span,
  .guru-portal__resource-list small
) {
  color: var(--guru-site-muted) !important;
}

body.com_guru:not(.admin) a {
  color: var(--guru-site-accent);
}

body.com_guru:not(.admin) a:hover {
  color: var(--guru-site-accent-hover);
}

body.com_guru:not(.admin) :where(
  .uk-panel,
  .wk-panel,
  .uk-panel-box,
  .wk-panel-box,
  .g_sect,
  .g_accordion-group,
  .guru-question-answer,
  .guru-quiz__answer-wrapper,
  .guru_result_list,
  .guru_quiz_score
) {
  background: var(--guru-site-raised);
  color: var(--guru-site-text);
  border: 1px solid var(--guru-site-border);
  border-radius: 8px;
  box-shadow: var(--guru-site-shadow-soft);
}

body.com_guru:not(.admin) :where(.uk-panel, .wk-panel, .g_sect) {
  padding: 18px;
}

body.com_guru:not(.admin) :where(
  .uk-panel-box-secondary,
  .wk-panel-box-secondary,
  .guru-portal__empty,
  .guru-quiz-timer,
  .guru-portal__band--attention
) {
  background: var(--guru-site-inset);
  color: var(--guru-site-muted);
  border: 1px solid var(--guru-site-border);
  box-shadow: var(--guru-site-shadow-inset);
}

body.com_guru:not(.admin) :where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="url"],
  select,
  textarea,
  .form-control,
  .uk-form-width-medium,
  .wk-form-width-medium
) {
  min-height: 42px;
  max-width: 100%;
  padding: 8px 12px;
  background-color: var(--guru-site-inset) !important;
  color: var(--guru-site-text) !important;
  border: 1px solid var(--guru-site-border) !important;
  border-radius: 6px !important;
  box-shadow: var(--guru-site-shadow-inset) !important;
  color-scheme: light;
}

html:is([data-bs-theme="dark"], [data-color-scheme="dark"])
  body.com_guru:not(.admin)
  :where(input, select, textarea, .form-control) {
  color-scheme: dark;
}

body.com_guru:not(.admin) :where(select option, select optgroup) {
  background-color: var(--guru-site-raised);
  color: var(--guru-site-text);
}

body.com_guru:not(.admin) :where(
  input,
  select,
  textarea,
  button,
  a
):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--guru-site-accent) 45%, transparent);
  outline-offset: 2px;
}

body.com_guru:not(.admin) :where(
  .uk-button,
  .wk-button,
  .btn,
  button[type="submit"],
  input[type="submit"],
  input[type="button"],
  .guru-portal__primary
) {
  min-height: 40px;
  padding: 9px 16px;
  color: var(--guru-site-text);
  background: var(--guru-site-raised);
  border: 1px solid var(--guru-site-border);
  border-radius: 6px;
  box-shadow: var(--guru-site-shadow-soft);
  font-weight: 650;
  text-shadow: none;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

body.com_guru:not(.admin) :where(
  .uk-button,
  .wk-button,
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  .guru-portal__primary
):hover {
  background: var(--guru-site-accent-soft);
  color: var(--guru-site-accent-hover);
  border-color: color-mix(in srgb, var(--guru-site-accent) 42%, transparent);
}

body.com_guru:not(.admin) :where(
  .uk-button-primary,
  .wk-button-primary,
  .btn-primary,
  .guru-portal__primary,
  .button-apply,
  .button-save,
  .button-save-new,
  .button-save-copy,
  button[type="submit"]:not(.btn):not(.button-cancel),
  input[type="submit"]:not(.btn):not(.button-cancel)
) {
  background: var(--guru-site-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 6px rgba(105, 108, 255, 0.28);
}

body.com_guru:not(.admin) :where(
  .uk-button-primary,
  .wk-button-primary,
  .btn-primary,
  .guru-portal__primary,
  .button-apply,
  .button-save,
  .button-save-new,
  .button-save-copy,
  button[type="submit"]:not(.btn):not(.button-cancel),
  input[type="submit"]:not(.btn):not(.button-cancel)
):hover {
  background: var(--guru-site-accent-hover) !important;
  color: #fff !important;
}

body.com_guru:not(.admin) :where(
  .button-cancel,
  .btn-secondary,
  .btn-outline-secondary,
  .btn-default
) {
  background: var(--guru-site-raised) !important;
  color: var(--guru-site-text) !important;
  border-color: var(--guru-site-border) !important;
}

body.com_guru:not(.admin) :where(
  .button-cancel,
  .btn-secondary,
  .btn-outline-secondary,
  .btn-default
):hover {
  background: var(--guru-site-inset) !important;
  color: var(--guru-site-text) !important;
}

body.com_guru:not(.admin) :where(.btn-outline-primary) {
  background: transparent !important;
  color: var(--guru-site-accent) !important;
  border-color: var(--guru-site-accent) !important;
  box-shadow: none !important;
}

body.com_guru:not(.admin) :where(.btn-outline-primary):hover {
  background: var(--guru-site-accent-soft) !important;
}

body.com_guru:not(.admin) :where(
  .uk-button-danger,
  .btn-danger:not(.button-cancel),
  .button-delete,
  .button-trash
) {
  background: var(--guru-site-danger) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.com_guru:not(.admin) :where(
  .uk-button-success,
  .btn-success:not(.button-apply):not(.button-save):not(.button-save-new):not(.button-save-copy)
) {
  background: var(--guru-site-success) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.com_guru:not(.admin) :where(.uk-button-warning, .btn-warning) {
  background: var(--guru-site-warning) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.com_guru:not(.admin) :where(.uk-button-info, .btn-info) {
  background: var(--guru-site-info) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.com_guru:not(.admin) :where(
  .btn:disabled,
  .btn.disabled,
  button:disabled,
  input:disabled
) {
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
}

body.com_guru:not(.admin) input[type="checkbox"].ace-switch + .lbl::before {
  background-color: var(--guru-site-inset) !important;
  border-color: var(--guru-site-border) !important;
  box-shadow: none !important;
  color: var(--guru-site-muted) !important;
  text-shadow: none !important;
}

body.com_guru:not(.admin) input[type="checkbox"].ace-switch:checked + .lbl::before {
  background-color: var(--guru-site-accent) !important;
  border-color: var(--guru-site-accent) !important;
  color: #fff !important;
}

body.com_guru:not(.admin) input[type="checkbox"].ace-switch + .lbl::after {
  background-color: #fff !important;
  box-shadow: 0 1px 3px rgba(34, 48, 62, 0.24) !important;
  color: var(--guru-site-muted) !important;
  text-shadow: none !important;
}

body.com_guru:not(.admin) input[type="checkbox"].ace-switch:focus-visible + .lbl::before {
  outline: 3px solid color-mix(in srgb, var(--guru-site-accent) 35%, transparent);
  outline-offset: 2px;
}

body.com_guru:not(.admin) :where(fieldset.radio.btn-group, .btn-group-yesno) {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: var(--guru-site-inset);
  border: 1px solid var(--guru-site-border);
  border-radius: 6px;
}

body.com_guru:not(.admin) :where(fieldset.radio.btn-group, .btn-group-yesno) > label.btn {
  min-height: 30px;
  padding: 5px 12px;
  background: transparent !important;
  color: var(--guru-site-muted) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.com_guru:not(.admin) :where(fieldset.radio.btn-group, .btn-group-yesno) > input:checked + label.btn,
body.com_guru:not(.admin) :where(fieldset.radio.btn-group, .btn-group-yesno) > label.btn.active {
  background: var(--guru-site-accent) !important;
  color: #fff !important;
}

body.com_guru:not(.admin) :where(.gru-page-filters, .filter-search) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 14px;
  background: var(--guru-site-inset);
  border: 1px solid var(--guru-site-border);
  border-radius: 8px;
  box-shadow: var(--guru-site-shadow-inset);
}

body.com_guru:not(.admin) .gru-filter-item {
  display: flex;
  flex: 1 1 240px;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

body.com_guru:not(.admin) .gru-filter-item :where(input, select) {
  flex: 1 1 180px;
  min-width: 0;
}

body.com_guru:not(.admin) :where(.g_table_wrap, .table-responsive) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--guru-site-border);
  border-radius: 8px;
  box-shadow: var(--guru-site-shadow-soft);
  -webkit-overflow-scrolling: touch;
}

body.com_guru:not(.admin) :where(
  table.uk-table,
  table.wk-table,
  table.table,
  table.adminlist,
  table.guru-my-orders
) {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--guru-site-text);
  background: var(--guru-site-raised);
  border-collapse: separate;
  border-spacing: 0;
}

body.com_guru:not(.admin) :where(
  table.uk-table,
  table.wk-table,
  table.table,
  table.adminlist,
  table.guru-my-orders
) :where(th, td) {
  padding: 12px 14px;
  color: inherit;
  background: transparent;
  border-color: var(--guru-site-border);
  vertical-align: middle;
}

body.com_guru:not(.admin) :where(
  table.uk-table,
  table.wk-table,
  table.table,
  table.adminlist,
  table.guru-my-orders
) th {
  color: var(--guru-site-text);
  background: var(--guru-site-inset);
  font-weight: 700;
}

body.com_guru:not(.admin) :where(
  .uk-table-striped,
  .wk-table-striped,
  .table-striped
) tbody tr:nth-of-type(odd) {
  background: color-mix(in srgb, var(--guru-site-inset) 68%, transparent);
}

body.com_guru:not(.admin) :where(.uk-tab, .wk-tab, .nav-tabs) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--guru-site-border);
  border-radius: 8px;
  background: var(--guru-site-inset);
  box-shadow: var(--guru-site-shadow-inset);
}

body.com_guru:not(.admin) :where(.uk-tab, .wk-tab, .nav-tabs) > li {
  margin: 0;
}

body.com_guru:not(.admin) :where(.uk-tab, .wk-tab, .nav-tabs) > li > a {
  min-height: 38px;
  padding: 9px 13px;
  color: var(--guru-site-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
}

body.com_guru:not(.admin) :where(.uk-tab, .wk-tab, .nav-tabs)
  > :where(.uk-active, .active)
  > a {
  color: var(--guru-site-accent);
  background: var(--guru-site-raised);
  box-shadow: var(--guru-site-shadow-soft);
}

body.com_guru:not(.admin) :where(
  .alert,
  .uk-alert,
  .wk-alert,
  .guru_message
) {
  padding: 14px 16px;
  color: var(--guru-site-text);
  background: var(--guru-site-raised);
  border: 1px solid var(--guru-site-border);
  border-left: 4px solid var(--guru-site-info);
  border-radius: 6px;
  box-shadow: var(--guru-site-shadow-soft);
}

body.com_guru:not(.admin) :where(.alert-success, .uk-alert-success) {
  border-left-color: var(--guru-site-success);
}

body.com_guru:not(.admin) :where(.alert-warning, .uk-alert-warning) {
  border-left-color: var(--guru-site-warning);
}

body.com_guru:not(.admin) :where(.alert-danger, .uk-alert-danger) {
  border-left-color: var(--guru-site-danger);
}

body.com_guru:not(.admin) .guru-portal {
  --gp-ink: var(--guru-site-text);
  --gp-muted: var(--guru-site-muted);
  --gp-line: var(--guru-site-border);
  --gp-surface: var(--guru-site-raised);
  --gp-soft: var(--guru-site-inset);
  --gp-accent: var(--guru-site-accent);
  --gp-warn: var(--guru-site-warning);
  padding: clamp(16px, 3vw, 28px);
}

body.com_guru:not(.admin) :where(
  .guru-portal__actions a,
  .guru-portal__resource-list a,
  .guru-portal__course
) {
  border-color: var(--guru-site-border);
  border-radius: 8px;
  background: var(--guru-site-raised);
  box-shadow: var(--guru-site-shadow-soft);
}

body.com_guru:not(.admin) .guru-portal__course-placeholder {
  background: var(--guru-site-inset);
  box-shadow: var(--guru-site-shadow-inset);
}

body.com_guru:not(.admin) .guru-portal__progress {
  height: 10px;
  background: var(--guru-site-inset);
  box-shadow: var(--guru-site-shadow-inset);
}

body.com_guru:not(.admin) .guru-portal__progress span {
  background: var(--guru-site-accent);
}

body.com_guru:not(.admin) :where(
  .gru-course-cover,
  .gru-teacher-wrap,
  .course-sidebar,
  .course-content,
  .guru-lesson,
  .guru-lesson-content
) {
  max-width: 100%;
  color: var(--guru-site-text);
  background-color: var(--guru-site-raised);
  border-color: var(--guru-site-border);
  border-radius: 8px;
}

body.com_guru:not(.admin) :where(
  .g_accordion-group,
  #the_quiz .guru_list,
  .guru-quiz__answer-wrapper
) {
  overflow: hidden;
}

body.com_guru:not(.admin) #the_quiz .guru_list,
body.com_guru:not(.admin) #the_quiz .guru_list li,
body.com_guru:not(.admin) #the_quiz .guru_list li.answer {
  color: var(--guru-site-text);
  background: var(--guru-site-raised);
  border-color: var(--guru-site-border);
}

body.com_guru:not(.admin) :where(
  .guru-question-answer,
  .guru-quiz__answer,
  .guru-quiz__check-box
) {
  min-height: 44px;
  color: var(--guru-site-text);
  background: var(--guru-site-raised);
}

body.com_guru:not(.admin) :where(
  .guru-question-answer:hover,
  .guru-quiz__answer:hover
) {
  border-color: var(--guru-site-accent);
  background: var(--guru-site-accent-soft);
}

body.com_guru:not(.admin) :where(.badge, .uk-badge, .wk-badge) {
  padding: 5px 9px;
  color: var(--guru-site-text);
  background: var(--guru-site-inset);
  border: 1px solid var(--guru-site-border);
  border-radius: 6px;
}

body.com_guru:not(.admin) :where(.modal-content, .uk-modal-dialog) {
  color: var(--guru-site-text);
  background: var(--guru-site-surface);
  border: 1px solid var(--guru-site-border);
  border-radius: 8px;
  box-shadow: var(--guru-site-shadow-raised);
}

body.com_guru:not(.admin) img,
body.com_guru:not(.admin) iframe,
body.com_guru:not(.admin) video {
  max-width: 100%;
}

@media (max-width: 820px) {
  body.com_guru:not(.admin) {
    overflow-x: hidden;
  }

  body.com_guru:not(.admin) :where(
    .gru-mycourses,
    .gru-mycoursesauthor,
    .gru-myorders,
    .gru-mycertificates,
    .gru-myquizzesstats
  ) {
    padding: 14px;
    border-radius: 6px;
    box-shadow: var(--guru-site-shadow-soft);
  }

  body.com_guru:not(.admin) .gru-page-title {
    align-items: stretch;
    flex-direction: column;
  }

  body.com_guru:not(.admin) :where(.gru-page-filters, .filter-search) {
    align-items: stretch;
    flex-direction: column;
  }

  body.com_guru:not(.admin) .gru-filter-item {
    align-items: stretch;
    flex-basis: auto;
    flex-direction: column;
  }

  body.com_guru:not(.admin) .gru-filter-item :where(input, select) {
    flex-basis: auto;
    width: 100%;
  }

  body.com_guru:not(.admin) :where(
    table.uk-table,
    table.wk-table,
    table.table,
    table.adminlist,
    table.guru-my-orders
  ) {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: normal;
    -webkit-overflow-scrolling: touch;
  }

  body.com_guru:not(.admin) :where(
    table.uk-table,
    table.wk-table,
    table.table,
    table.adminlist,
    table.guru-my-orders
  ) :where(th, td) {
    min-width: 130px;
  }

  body.com_guru:not(.admin) :where(
    .uk-button-group,
    .wk-button-group,
    .btn-group
  ) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.com_guru:not(.admin) .guru-portal__course {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.com_guru:not(.admin) *,
  body.com_guru:not(.admin) *::before,
  body.com_guru:not(.admin) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}