/* ==========================================================================
   Pixel Academy — Course flow (course-details + lessons)
   Built on the pixel-v2.css tokens and primitives. Arabic-first, RTL,
   mobile-first. Presentation only — never carries backend content.
   ========================================================================== */

[hidden] {
  display: none !important;
}

/* The global header is fixed, so the page opens underneath it unless it
   clears it. One measured value, applied once, at the page root. */
body.px-body.pcf-page {
  padding-top: var(--px-header-total, 62px);
}

body.pcf-page {
  min-height: 100vh;
  background: var(--pa-bg);
}

/* --------------------------------------------------------------------------
   1. Compact top bar
   The internal header is shared with the rest of the course and lesson flow
   and lives in pixel-app-theme.css (.pa-appbar).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */
.pcf-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--pa-space-5) var(--pa-space-4) var(--pa-space-8);
}

@media (min-width: 768px) {
  .pcf-shell {
    padding-inline: var(--pa-space-6);
  }
}

@media (max-width: 400px) {
  .pcf-shell {
    padding-inline: var(--pa-space-3);
  }
}

.pcf-alert {
  margin-bottom: var(--pa-space-5);
}

.pcf-alert:empty {
  display: none;
}

/* Shared skeleton shapes */
.pcf-skel-line {
  height: 14px;
  margin-bottom: var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
}

.pcf-skel-line--title {
  width: 55%;
  height: 24px;
}

.pcf-skel-line--short {
  width: 35%;
}

.pcf-skel-media {
  width: 100%;
  height: 200px;
  margin-bottom: var(--pa-space-4);
  border-radius: var(--pa-radius-xl);
}

.pcf-skel-row {
  height: 64px;
  margin-bottom: var(--pa-space-3);
  border-radius: var(--pa-radius);
}

@media (min-width: 768px) {
  .pcf-skel-media {
    height: 300px;
  }
}

/* --------------------------------------------------------------------------
   3. Course details — layout
   -------------------------------------------------------------------------- */
.pcf-cd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "side"
    "about";
  gap: var(--pa-space-5);
  align-items: start;
}

.pcf-cd-head {
  grid-area: head;
  min-width: 0;
}

.pcf-cd-side {
  grid-area: side;
  min-width: 0;
}

.pcf-cd-about {
  grid-area: about;
  min-width: 0;
}

@media (min-width: 992px) {
  .pcf-cd-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
      "head  side"
      "about side";
    gap: var(--pa-space-6);
  }

  .pcf-cd-side {
    position: sticky;
    /* Was a hardcoded 88px, i.e. a second private copy of the header height
       that no measurement kept in step. --px-header-total is the real
       rendered height the shell publishes, Safe Area already included. */
    top: calc(var(--px-header-total, 72px) + 16px);
  }
}

/* Course image — responsive, never stretched */
.pcf-cd-media {
  margin: 0 0 var(--pa-space-5);
  overflow: hidden;
  background: var(--pa-surface-3);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-sm);
}

.pcf-cd-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  object-fit: contain;
}

@media (min-width: 992px) {
  .pcf-cd-media img {
    max-height: 440px;
  }
}

body.pixel-v2 .pcf-cd-title {
  margin: 0 0 var(--pa-space-3);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  body.pixel-v2 .pcf-cd-title {
    font-size: 1.75rem;
  }
}

.pcf-cd-teacher {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0 0 var(--pa-space-4);
  font-size: var(--pa-fs-md);
  color: var(--pa-text-2);
  overflow-wrap: anywhere;
}

.pcf-cd-teacher i {
  color: var(--pa-primary-ink);
}

.pcf-cd-teacher strong {
  font-weight: 800;
  color: var(--pa-text);
}

.pcf-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcf-facts:empty {
  display: none;
}

/* Description — comfortable reading width, no card-in-card */
.pcf-cd-about {
  padding-top: var(--pa-space-2);
}

body.pixel-v2 .pcf-cd-about h2 {
  margin: 0 0 var(--pa-space-3);
  font-size: var(--pa-fs-lg);
  font-weight: 800;
}

body.pixel-v2 .pcf-cd-about h2::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 18px;
  margin-inline-end: var(--pa-space-2);
  vertical-align: -3px;
  background: var(--pa-primary);
  border-radius: var(--pa-radius-pill);
}

body.pixel-v2 .pcf-cd-about p {
  max-width: 68ch;
  margin: 0;
  font-size: var(--pa-fs-md);
  line-height: var(--pa-lh);
  color: var(--pa-text-2);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   4. Course details — action panel
   -------------------------------------------------------------------------- */
.pcf-cd-panel {
  padding: var(--pa-space-5);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-sm);
}

body.pixel-v2 .pcf-cd-price {
  display: block;
  margin: 0 0 var(--pa-space-4);
  font-size: var(--pa-fs-2xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--pa-primary-ink);
}

.pcf-cd-actions {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

.pcf-cd-actions.is-empty {
  display: none;
}

body.pixel-v2 .pcf-cd-actions .pa-btn {
  width: 100%;
  min-height: 48px;
}

.pcf-cd-note {
  margin: var(--pa-space-4) 0 0;
  font-size: var(--pa-fs-sm);
  line-height: 1.7;
  color: var(--pa-text-muted);
}

.pcf-cd-note:empty {
  display: none;
}

.pcf-cd-note.is-error {
  color: var(--pa-danger);
}

.pcf-cd-secondary {
  margin-top: var(--pa-space-4);
  padding-top: var(--pa-space-4);
  border-top: 1px solid var(--pa-border);
}

body.pixel-v2 .pcf-cd-secondary .pa-btn {
  width: 100%;
}

/* Mobile: primary actions become a tasteful sticky bar */
@media (max-width: 991.98px) {
  .pcf-cd-actions {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    flex-direction: row;
    gap: var(--pa-space-2);
    padding: var(--pa-space-3) var(--pa-space-4)
      calc(var(--pa-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--pa-surface);
    border-top: 1px solid var(--pa-border);
    box-shadow: var(--pa-shadow-up);
  }

  body.pixel-v2 .pcf-cd-actions .pa-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--pa-space-3);
  }

  body.pcf-has-actions {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   5. Modals — exam list & purchase confirmation
   -------------------------------------------------------------------------- */
body.pixel-v2 .pcf-modal .modal-content {
  padding-top: var(--pa-space-8);
}

.pcf-modal-state {
  margin-bottom: var(--pa-space-3);
}

.pcf-modal-state:empty {
  display: none;
}

body.pixel-v2 .pcf-modal-lead {
  margin: 0 0 var(--pa-space-4);
  font-size: var(--pa-fs-md);
  color: var(--pa-text-2);
}

body.pixel-v2 .pcf-modal-lead:empty {
  display: none;
}

.pcf-modal-msg {
  margin: var(--pa-space-3) 0 0;
  font-size: var(--pa-fs-md);
  font-weight: 700;
  text-align: center;
}

.pcf-modal-msg:empty {
  display: none;
}

.pcf-modal-msg.is-error {
  color: var(--pa-danger);
}

.pcf-modal-msg.is-success {
  color: var(--pa-success);
}

body.pixel-v2 .pcf-exam-list {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  max-height: 52vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

body.pixel-v2 .pcf-exam-list:empty {
  display: none;
}

.pcf-exam-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-3) var(--pa-space-4);
  background: var(--pa-surface-2);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
}

.pcf-exam-item__name {
  flex: 1 1 140px;
  min-width: 0;
  font-size: var(--pa-fs-md);
  font-weight: 700;
  color: var(--pa-text);
  overflow-wrap: anywhere;
}

body.pixel-v2 .pcf-exam-item .pa-btn {
  flex: 0 0 auto;
  min-height: var(--pa-touch);
}

.pcf-exam-item__error {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--pa-fs-sm);
  color: var(--pa-danger);
}

/* --------------------------------------------------------------------------
   6. Lessons page — course summary
   -------------------------------------------------------------------------- */
.pcf-ls-summary {
  padding: var(--pa-space-4);
  margin-bottom: var(--pa-space-6);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-sm);
}

.pcf-ls-summary__top {
  display: flex;
  align-items: center;
  gap: var(--pa-space-4);
  min-width: 0;
}

.pcf-ls-summary__media {
  flex: 0 0 auto;
  width: 84px;
  overflow: hidden;
  background: var(--pa-surface-3);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
}

.pcf-ls-summary__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84px;
  object-fit: contain;
}

.pcf-ls-summary__text {
  flex: 1 1 auto;
  min-width: 0;
}

body.pixel-v2 .pcf-ls-title {
  margin: 0 0 var(--pa-space-2);
  font-size: var(--pa-fs-lg);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.pcf-ls-teacher {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  font-size: var(--pa-fs-sm);
  color: var(--pa-text-muted);
  overflow-wrap: anywhere;
}

.pcf-ls-teacher i {
  color: var(--pa-primary-ink);
}

.pcf-ls-summary .pcf-facts {
  margin-top: var(--pa-space-4);
}

body.pixel-v2 .pcf-ls-desc {
  max-width: 68ch;
  margin: var(--pa-space-4) 0 0;
  padding-top: var(--pa-space-4);
  font-size: var(--pa-fs-md);
  color: var(--pa-text-2);
  border-top: 1px solid var(--pa-border);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

@media (min-width: 768px) {
  .pcf-ls-summary {
    padding: var(--pa-space-5);
  }

  .pcf-ls-summary__media {
    width: 120px;
  }

  .pcf-ls-summary__media img {
    max-height: 120px;
  }

  body.pixel-v2 .pcf-ls-title {
    font-size: var(--pa-fs-xl);
  }
}

/* --------------------------------------------------------------------------
   7. Lessons page — the journey
   -------------------------------------------------------------------------- */
.pcf-ls-head {
  display: flex;
  align-items: baseline;
  gap: var(--pa-space-3);
  margin-bottom: var(--pa-space-4);
}

body.pixel-v2 .pcf-ls-head h2 {
  margin: 0;
  font-size: var(--pa-fs-lg);
  font-weight: 800;
}

.pcf-ls-state {
  margin-bottom: var(--pa-space-4);
}

.pcf-ls-state:empty {
  display: none;
}

body.pixel-v2 .pcf-ls-list {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcf-lesson {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pa-space-2) var(--pa-space-3);
  align-items: center;
  padding: var(--pa-space-4);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  transition: border-color var(--pa-t) var(--pa-ease),
    box-shadow var(--pa-t) var(--pa-ease);
}

.pcf-lesson:hover {
  border-color: var(--pa-primary-100);
  box-shadow: var(--pa-shadow-sm);
}

/* Journey connector between the sequence badges */
.pcf-lesson::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: calc(var(--pa-space-4) + 18px);
  width: 2px;
  height: var(--pa-space-3);
  background: var(--pa-border-strong);
}

.pcf-lesson:last-child::after {
  display: none;
}

.pcf-lesson__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 38px;
  font-size: var(--pa-fs-md);
  font-weight: 800;
  color: var(--pa-primary-700);
  background: var(--pa-primary-050);
  border: 1px solid var(--pa-primary-100);
  border-radius: var(--pa-radius-pill);
}

body.pixel-v2 .pcf-lesson__name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--pa-fs-md);
  font-weight: 700;
  line-height: 1.6;
  color: var(--pa-text);
  overflow-wrap: anywhere;
}

body.pixel-v2 .pcf-lesson__cta {
  grid-column: 1 / -1;
  width: 100%;
  min-height: var(--pa-touch);
}

.pcf-lesson__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--pa-fs-sm);
  color: var(--pa-danger);
}

@media (min-width: 576px) {
  .pcf-lesson {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--pa-space-4) var(--pa-space-5);
  }

  .pcf-lesson::after {
    inset-inline-start: calc(var(--pa-space-5) + 18px);
  }

  body.pixel-v2 .pcf-lesson__cta {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    min-width: 140px;
  }
}