.ldcm-modal {
  --ldcm-max-width: 1440px;
  --ldcm-height: 92vh;
  --ldcm-z-index: 999999;
  --ldcm-overlay-opacity: 0.55;
  --ldcm-radius: 18px;
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--ldcm-z-index) !important;
  isolation: isolate;
}

.ldcm-modal[hidden] {
  display: none !important;
}

.ldcm-modal,
.ldcm-modal *,
.ldcm-modal *::before,
.ldcm-modal *::after {
  box-sizing: border-box;
}

.ldcm-modal__overlay {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  opacity: 1 !important;
  /* FIX: Removed "background: transparent !important" (the shorthand resets every
     background sub-property, and themes then win on :hover with higher source-order
     specificity). Using background-color alone, locked across all interaction states,
     is the correct approach. The dark semi-transparent scrim is the industry-standard
     choice for modal overlays: it focuses attention, signals inaccessibility of the
     content behind, and works against any theme colour. */
  background-color: rgba(0, 0, 0, var(--ldcm-overlay-opacity)) !important;
  cursor: default;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Prevent theme :hover / :focus / :active rules from tinting or clearing
   the overlay colour. Without these overrides, a theme rule such as
   "div:hover { background-color: blue !important; }" will win on source
   order when its specificity matches ours. */
.ldcm-modal__overlay:hover,
.ldcm-modal__overlay:focus,
.ldcm-modal__overlay:active {
  background-color: rgba(0, 0, 0, var(--ldcm-overlay-opacity)) !important;
  outline: none !important;
  box-shadow: none !important;
}

.ldcm-modal__dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(96vw, var(--ldcm-max-width)) !important;
  height: min(var(--ldcm-height), 980px) !important;
  margin: 4vh auto 0 !important;
  background: #ffffff !important;
  border-radius: var(--ldcm-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  isolation: isolate;
}

.ldcm-modal.ldcm-modal--mobile .ldcm-modal__dialog {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}

.ldcm-modal__header {
  position: relative;
  z-index: 2;
  min-height: 64px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff !important;
}

.ldcm-modal.ldcm-modal--mobile .ldcm-modal__header {
  padding: max(12px, env(safe-area-inset-top)) 14px 12px 14px;
}

.ldcm-modal__title {
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ldcm-modal__actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ldcm-modal__text-button,
.ldcm-modal__text-button:visited,
.ldcm-modal__primary-link,
.ldcm-modal__primary-link:visited {
  text-decoration: none;
  font: inherit;
}

.ldcm-modal__text-button {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  color: #0f3d7a !important;
  padding: 8px 10px;
  cursor: pointer;
}

.ldcm-modal__text-button:hover,
.ldcm-modal__text-button:focus-visible {
  text-decoration: underline;
}

.ldcm-modal__icon-button,
.ldcm-modal__close {
  appearance: none;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ldcm-modal__icon-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 999px;
  background: #f2f4f7 !important;
  color: #111111 !important;
  font-size: 1.125rem;
  line-height: 1;
}

.ldcm-modal__icon-button:hover,
.ldcm-modal__icon-button:focus-visible {
  background: #e7ebf0 !important;
}

.ldcm-modal__icon-button.is-active {
  background: #111111 !important;
  color: #ffffff !important;
}

.ldcm-modal__icon-button-icon {
  line-height: 1;
}

.ldcm-modal__close {
  background: #111111 !important;
  color: #ffffff !important;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 999px;
  font-size: 1.75rem;
  line-height: 1;
}

.ldcm-modal__body {
  position: relative;
  min-height: 0;
  overflow: hidden !important;
  background: #ffffff !important;
}

.ldcm-modal.ldcm-modal--mobile .ldcm-modal__body {
  padding-bottom: env(safe-area-inset-bottom);
}

.ldcm-modal__loader,
.ldcm-modal__fallback {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: #ffffff !important;
  opacity: 1 !important;
  z-index: 3;
}

.ldcm-modal__loader[hidden],
.ldcm-modal__fallback[hidden] {
  display: none !important;
}

.ldcm-modal__spinner {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3px solid rgba(17, 17, 17, 0.12);
  border-top-color: rgba(17, 17, 17, 0.7);
  animation: ldcm-spin 0.9s linear infinite;
  margin-bottom: 14px;
}

.ldcm-modal__loader-text {
  margin: 0;
  font-size: 1rem;
  color: #222222;
}

.ldcm-modal__iframe-wrap {
  position: absolute !important;
  inset: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.ldcm-modal__iframe-wrap:not(.is-ready) .ldcm-modal__iframe {
  opacity: 0 !important;
  pointer-events: none !important;
}

.ldcm-modal__iframe-wrap.is-ready .ldcm-modal__iframe {
  opacity: 1 !important;
}

.ldcm-modal__iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #ffffff !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ldcm-modal__fallback-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.ldcm-modal__fallback-message {
  margin: 0;
  max-width: 44rem;
  color: #333333;
}

.ldcm-modal__fallback-actions {
  display: flex;
  justify-content: center;
}

.ldcm-modal__primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #111111 !important;
  color: #ffffff !important;
}

.ldcm-modal__primary-link:hover,
.ldcm-modal__primary-link:focus-visible {
  color: #ffffff !important;
  text-decoration: none;
  transform: translateY(-1px);
}

.ldcm-modal__device-toggle {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 10px;
  justify-content: center;
  max-width: 40rem;
  text-align: left;
}

.ldcm-modal__device-toggle input {
  margin-top: 3px;
}

.ldcm-reset-chip {
  position: fixed !important;
  right: 16px;
  bottom: 16px;
  z-index: calc(var(--ldcm-z-index, 999999) - 1);
  appearance: none;
  border: 0 !important;
  border-radius: 999px;
  background: #111111 !important;
  color: #ffffff !important;
  padding: 12px 16px;
  line-height: 1.2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.ldcm-reset-chip[hidden] {
  display: none !important;
}

html.ldcm-modal-open,
body.ldcm-modal-open {
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   Iframe / fullscreen mode — LearnDash breadcrumb
   .ld-breadcrumbs is redundant chrome inside the modal iframe and in browser
   fullscreen view. Both states apply .ldcm-iframe-mode to the page body, so
   a single rule covers both. The [aria-label] selector catches any case where
   the class alone is insufficient (e.g. if a theme wraps it differently).
--------------------------------------------------------------------------- */
.ldcm-iframe-mode .ld-breadcrumbs,
.ldcm-iframe-mode [aria-label="Breadcrumbs"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Iframe / fullscreen mode — notification and enrollment confirmation banners
   These elements render above the LearnDash Focus Mode layout, creating an
   unwanted gap between the modal header bar and the course chrome. Three
   common sources are covered:

   1. Kadence theme (.kt-notices-wrap) — wraps WooCommerce and other notices
      at the top of the page content area.
   2. LearnDash alerts (.ld-alert) — enrollment confirmations and course
      status messages output by LearnDash before the focus mode wrapper.
   3. WooCommerce notices (.woocommerce-notices-wrapper, .woocommerce-message,
      .woocommerce-error, .woocommerce-info) — shown after an order or
      enrollment action when WooCommerce handles course access.

   If the banner on your site uses a different selector, add it to
   Settings > LearnDash Course Modal > Selectors to hide inside iframe view.
--------------------------------------------------------------------------- */
.ldcm-iframe-mode .kt-notices-wrap,
.ldcm-iframe-mode .ld-alert,
.ldcm-iframe-mode .woocommerce-notices-wrapper,
.ldcm-iframe-mode .woocommerce-message,
.ldcm-iframe-mode .woocommerce-error,
.ldcm-iframe-mode .woocommerce-info {
  display: none !important;
}

@keyframes ldcm-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .ldcm-modal__header {
    align-items: flex-start !important;
  }

  .ldcm-modal__actions {
    width: 100%;
    justify-content: space-between;
  }

  .ldcm-modal__title {
    white-space: normal;
  }

  .ldcm-modal__loader,
  .ldcm-modal__fallback {
    padding: 20px;
  }

  .ldcm-reset-chip {
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ldcm-modal__spinner,
  .ldcm-modal__primary-link {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}