/* ============================================================================
   APP CSS — page styles for the app half only (account, auth card, course).
   Loaded last, after the shared fonts → tokens → base → layout. Tokens only:
   no hardcoded colors, fonts, sizes or spacing, so it stays in lockstep with
   the marketing site's design system.
   ========================================================================== */

/* The header is fixed; push the app's content clear of it. Pages here have no
   hero of their own, so the offset lives on the shell. */
.app-main {
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}
@media (max-width: 900px) {
  .app-main { padding-top: var(--header-height-sm); }
}

/* ---- Shared little pieces ------------------------------------------------ */
.panel {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-heading);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}
.panel__action { align-self: start; margin-top: auto; }
.panel__empty { color: var(--color-text-muted); margin: 0; }
.panel__hint { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }

/* ---- Static field labels (always visible) — for data-entry forms like billing,
   as opposed to the collapse-on-empty labels of the auth card. -------------- */
.field--static .field__label {
  order: -2;
  height: auto;
  opacity: 1;
  margin-bottom: var(--space-1);
}
.field--static .field__control { order: -1; }

/* ---- Native select styled to match .field__control ---------------------- */
.field__control--select {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark; /* dark native dropdown list */
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: calc(var(--space-4) * 2 + 12px);
}

.mock-note {
  margin: var(--space-5) 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  text-align: center;
}

/* ---- Loading ------------------------------------------------------------- */
.app-loading {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding-block: var(--space-9);
  color: var(--color-text-muted);
}
.app-loading__spinner {
  width: 2rem; height: 2rem;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-pill);
  animation: app-spin 700ms linear infinite;
}
@keyframes app-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .app-loading__spinner { animation: app-pulse 1.4s ease-in-out infinite; }
  @keyframes app-pulse { 50% { opacity: 0.3; } }
}

/* ========================= AUTH (logged-out) ============================= */
.auth-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}
.auth-intro { text-align: center; display: grid; gap: var(--space-3); max-width: 42ch; }
.auth-intro h1 { margin: 0; }
.auth-intro p { color: var(--color-text-muted); margin: 0 auto; }

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* A card that holds just a message + one action, not a form. */
.auth-card--message { align-items: flex-start; }

/* Segmented switcher between login and sign-up. */
.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.auth-switch__btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.auth-switch__btn:hover { color: var(--color-heading); }
.auth-switch__btn.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Two fields side by side (prenume + nume), stacking on narrow screens. */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 480px) { .form__row { grid-template-columns: 1fr; } }

.auth-aux { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--space-2)); }
.auth-aux a { font-family: var(--font-ui); font-size: var(--fs-sm); }

.auth-alt {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--color-accent);
}
.link-btn:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* ========================= ACCOUNT (logged-in) ========================== */
.account__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); }
.account__head h1 { margin: 0; }
.account__sub { color: var(--color-text-muted); margin: 0; }

.account__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 760px) { .account__grid { grid-template-columns: 1fr; } }

.detail-list { display: grid; gap: var(--space-3); margin: 0; }
.detail-list__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.detail-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list dt {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.detail-list dd { margin: 0; color: var(--color-heading); overflow-wrap: anywhere; }

.status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.status-list__item { display: flex; align-items: flex-start; gap: var(--space-4); }
.status-list__name { margin: 0; color: var(--color-heading); font-family: var(--font-heading); }
.status-list__meta { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

.status-badge {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.status-badge--active {
  color: var(--color-success);
  background: rgba(51, 196, 129, 0.12);
  border: 1px solid var(--color-success);
}

.account__billing { margin-top: var(--space-5); }
.account__billing .form { max-width: 560px; }

.account__buy { margin-top: var(--space-8); }
.account__buy-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.account__buy-head h2 { margin: 0; }
.account__buy-head p { color: var(--color-text-muted); margin: 0; }
.account__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
}

/* ---- Course gate: /curs without a valid pass ---------------------------- */
.course-gate { display: grid; gap: var(--space-4); }
.course-gate h1 { margin: 0; }
.course-gate > p { margin: 0 0 var(--space-3); color: var(--color-text); }
.course-gate__signin { margin: var(--space-4) 0 0; color: var(--color-text-muted); }

/* Why the buy button is disabled, and what to do instead. Sits directly under
   the button it explains. */
.price-card__note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: none;
}
.price-card__note a { color: var(--color-accent); }

/* A disabled CTA must look inert — the shared .btn keeps its accent fill and
   pointer otherwise, which reads as clickable. */
.price-card__cta:disabled {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================== COURSE ================================== */
.course__title { margin: 0 0 var(--space-7); }

.course__blocks {
  display: grid;
  gap: var(--space-8);
}

/* Complet's chapter heading. Sits above its video; Standard has none. */
.course__chapter {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* The stage. Every course video is shot vertical (9:16) for mobile, so the
   player is always portrait; on desktop it sits centred on a wider letterboxed
   stage rather than being stretched. */
.course-video {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* The portrait player itself — height-driven, so it fits the stage exactly. */
.course-video__player {
  height: 100%;
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
}
.course-video__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* The poster stands in for the player until it is clicked, so a long course
   page loads one image per video instead of one player per video. */
.course-video__poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.course-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 92%, transparent);
  color: var(--color-on-accent);
  transition: transform var(--transition), background var(--transition);
}
.course-video__play svg { width: 34px; height: 34px; margin-left: 3px; }
.course-video__poster:hover .course-video__play,
.course-video__poster:focus-visible .course-video__play { transform: scale(1.08); }

.course-video__placeholder {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
}
.course-video__placeholder svg {
  width: 48px; height: 48px;
  color: var(--color-accent);
  opacity: 0.85;
}
.course-video__placeholder p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Closing copy under the videos. Body text, not muted — this is real reading
   copy and the muted grey was too dim against black. */
.course-prose {
  /* Long-form copy on pure black: brighter than standard body text, and the
     roomier long-form line-height rather than the tighter in-section one. */
  color: var(--color-text-bright);
  line-height: var(--lh-body);
}
/* base.css caps every <p> at 68ch; course copy runs the full content width. */
.course-prose p { margin: 0 0 var(--space-4); max-width: none; }
.course-prose > :last-child { margin-bottom: 0; }

.course-prose__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xl);
  color: var(--color-heading);
}
.course-prose__subheading {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--fs-lg);
  color: var(--color-heading);
}
/* The lead-in line above the first condition should not float away from it. */
.course-prose__heading + p { margin-bottom: var(--space-5); }

.course-prose__minorheading {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}

.course-prose__list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.course-prose__list li { max-width: none; }
/* Sub-points under a list item. */
.course-prose__sublist {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  list-style: circle;
}

/* Mobile: the videos were made for this. Drop the letterbox stage and let the
   portrait player fill the column. */
@media (max-width: 760px) {
  .course-video {
    aspect-ratio: 9 / 16;
    width: 100%;
  }
  .course-video__player { height: 100%; width: 100%; aspect-ratio: auto; }
}