/* WordPress glue for the jl-newui templates. Not part of the static
   templates: only rules that exist because the page runs inside WordPress. */

/* Keep the sticky course bar below the admin toolbar. */
.admin-bar .jl-hdr-top {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .jl-hdr-top {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .jl-hdr-top {
    top: 0;
  }
}

/* WooCommerce prints prices as <span class="woocommerce-Price-amount"><bdi>. */
.jl-price bdi {
  font: inherit;
}

/* Card images are wrapped in a link to the course or article. */
.jl-ccard-media > a,
.jl-gcard-media > a {
  display: block;
  height: 100%;
}

/* A course with no image of its own shows its provider's logo, uncropped. */
.jl-ccard-media img.jl-ccard-logo {
  object-fit: contain;
  padding: 1rem;
  background-color: var(--jl-white);
}

/* Course listings: the row image is wrapped in a link too, and a course
   with no image of its own shows its provider's logo, uncropped. */
.jl-crow-media > a {
  display: block;
  height: 100%;
}

.jl-crow-media img.jl-crow-logo {
  object-fit: contain;
  padding: 0.75rem;
  background-color: var(--jl-white);
}

/* No results. */
.jl-ac-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background-color: var(--jl-white);
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-radius);
}

.jl-ac-empty h3 {
  font-size: 1.125rem;
}

.jl-ac-empty p {
  color: var(--jl-body);
  font-size: var(--jl-fs-sm);
}

/* "Show less" turns the chevron up. */
.jl-flt-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* The Apply button (hidden once JavaScript runs) comes after the last
   group, so close the last group off here instead of with :last-child. */
.jl-flt .jl-flt-group:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------------------------
 * Single course (single-product.php)
 * --------------------------------------------------------------------- */

/* Provider logo used as the course image: show it whole on white. */
.jl-sc-head-photo--logo {
  object-fit: contain;
  object-position: center;
  padding: 1.5rem;
  background-color: var(--jl-white);
}

.jl-sc-panel-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

/* Course summary: label on the left, value on the right. */
.jl-sc-facts {
  margin: 0;
}

.jl-sc-fact {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--jl-line);
}

.jl-sc-fact:first-child {
  padding-top: 0;
}

.jl-sc-fact:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.jl-sc-fact dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--jl-body);
  font-size: var(--jl-fs-sm);
  font-weight: 500;
}

.jl-sc-fact dt svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--jl-primary);
}

.jl-sc-fact dd {
  margin: 0;
  color: var(--jl-heading);
  font-weight: 600;
}

.jl-sc-fact dd small {
  display: block;
  margin-top: 0.125rem;
  color: var(--jl-body);
  font-size: var(--jl-fs-xs);
  font-weight: 400;
}

@media (max-width: 575.98px) {
  .jl-sc-fact {
    grid-template-columns: minmax(0, 1fr);
  }
}

.jl-sc-learners {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  color: var(--jl-heading);
  font-size: var(--jl-fs-sm);
  font-weight: 600;
  background-color: var(--jl-surface);
  border-radius: var(--jl-radius-sm);
}

.jl-sc-learners svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--jl-primary);
}

/* Section links above the course text. */
.jl-sc-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--jl-line);
}

.jl-sc-toc a {
  padding: 0.375rem 0.875rem;
  color: var(--jl-heading);
  font-size: var(--jl-fs-sm);
  font-weight: 600;
  text-decoration: none;
  background-color: var(--jl-surface);
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-radius-pill);
}

.jl-sc-toc a:hover,
.jl-sc-toc a:focus-visible {
  color: var(--jl-white);
  background-color: var(--jl-primary);
  border-color: var(--jl-primary);
}

.jl-sc-text {
  scroll-margin-top: calc(var(--jl-hdr-h) + 1rem);
}

.jl-sc-text + .jl-sc-text {
  margin-top: 2rem;
}

#jl-sc-summary,
#jl-sc-reviews,
#jl-sc-qna,
#jl-sc-buy {
  scroll-margin-top: calc(var(--jl-hdr-h) + 1rem);
}

/* Reviews. */
.jl-sc-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jl-sc-review {
  padding: 1rem 0;
  border-top: 1px solid var(--jl-line);
}

.jl-sc-review:last-child {
  padding-bottom: 0;
}

.jl-sc-review strong {
  color: var(--jl-heading);
}

.jl-sc-review-stars {
  display: inline-flex;
  gap: 0.0625rem;
  color: var(--jl-amber);
}

.jl-sc-review-stars svg {
  width: 0.875rem;
  height: 0.875rem;
}

.jl-sc-review-date {
  display: block;
  margin: 0.125rem 0 0.5rem;
  color: var(--jl-muted);
  font-size: var(--jl-fs-xs);
}

.jl-sc-review p {
  margin: 0;
  color: var(--jl-body);
  font-size: var(--jl-fs-sm);
  line-height: 1.7;
}

/* Dokan Q&A inside our panel. */
.jl-sc-qna {
  font-size: var(--jl-fs-sm);
}

.jl-sc-qna textarea,
.jl-sc-qna input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-radius-sm);
}

.jl-sc-qna button,
.jl-sc-qna .dokan-btn {
  padding: 0.5rem 1.25rem;
  color: var(--jl-white);
  font-weight: 600;
  background-color: var(--jl-primary);
  border: 0;
  border-radius: var(--jl-radius-sm);
}

/* Buy box: provider logo, price, offer. */
.jl-sc-buy-logo {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  background-color: var(--jl-white);
  border: 1px solid var(--jl-line);
  border-radius: 50%;
}

.jl-sc-buy-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem 0.625rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.jl-sc-buy-price .jl-price-now {
  font-size: 1.875rem;
}

.jl-sc-buy-price .jl-price-was {
  font-size: 1rem;
}

.jl-sc-buy-off {
  padding: 0.125rem 0.625rem;
  color: var(--jl-green);
  font-size: var(--jl-fs-xs);
  font-weight: 700;
  background-color: var(--jl-ico-green);
  border-radius: var(--jl-radius-pill);
}

.jl-sc-buy-ends {
  flex-basis: 100%;
  color: var(--jl-red);
  font-size: var(--jl-fs-xs);
  font-weight: 600;
}

.jl-sc-buy-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.jl-sc-buy-cart svg {
  width: 1.125rem;
  height: 1.125rem;
}

.jl-sc-buy-row small {
  display: block;
  color: var(--jl-muted);
  font-size: var(--jl-fs-xs);
}

.jl-sc-buy-reviews .jl-rate-stars svg {
  width: 1rem;
  height: 1rem;
}

.jl-share-btn.is-copied {
  color: var(--jl-white);
  background-color: var(--jl-green);
}

/* Average rating beside the reviews heading. */
.jl-sc-review-avg {
  font-size: 1rem;
  font-weight: 700;
}

.jl-sc-review-avg .jl-rate-count {
  font-size: var(--jl-fs-sm);
  font-weight: 400;
}

/* ------------------------------------------------------------------------
 * Old pages (body.jl-legacy, header.php / footer.php)
 *
 * The new header and footer (.jl-chrome) sit next to Dokani's and
 * Bootstrap 4's stylesheets there. These undo the few element rules of
 * theirs that reach into the header, footer and their modals. :where()
 * keeps each rule at the same weight as the old one it undoes, so the new
 * UI's own class rules still win. Dokani's Customizer colours are kept out
 * by jl_newui_scope_dokani_css().
 * --------------------------------------------------------------------- */

:where(.jl-legacy .jl-chrome) ul {
  margin-left: 0;
}

:where(.jl-legacy .jl-chrome) .dropdown-menu li {
  display: list-item;
  padding: 0;
}

:where(.jl-legacy .jl-chrome) button:is(:hover, :focus, :active) {
  opacity: 1;
}

:where(.jl-legacy .jl-chrome) input.form-control {
  max-width: none;
  padding: 0.75rem 1rem;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--jl-line);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

:where(.jl-legacy .jl-chrome) input.form-control:focus {
  color: var(--bs-body-color);
}

/* Bootstrap 4 colours plain links on hover; Bootstrap 5 only swaps a
   variable. */
:where(.jl-legacy .jl-chrome) a:hover {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}

/* Dokani pads every button. */
:where(.jl-legacy .jl-chrome) button {
  padding: revert;
}

/* Bootstrap 4 and Dokani colour .btn / .btn-primary on focus. */
:where(.jl-legacy .jl-chrome) .btn:focus:not(:hover):not(:focus-visible) {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

:where(.jl-legacy .jl-chrome) .btn:is(:hover, :focus, :active):not(:focus-visible) {
  box-shadow: none;
}