/* ==========================================================================
   Parudux Academy — UI Layer v2
   --------------------------------------------------------------------------
   Version : 2.0  (2026-09-21)
   Load    : LAST, after every other stylesheet.

   WHY THIS FILE EXISTS
   The public site ships as a compiled React bundle whose source is not
   available. Every colour is baked in as a Tailwind arbitrary value
   (bg-[#06060f], text-[#a8b4c8] ...) and there is not a single `dark:`
   variant in the build. Anything structural therefore has to be done from
   a stylesheet that sits on top of the bundle.

   Three problems are fixed here, in this order:

   1. HORIZONTAL SCROLL ON MOBILE  (the "page slides left and right" bug)
      Root cause, measured on the live site at 375px wide:
        div.absolute.top-0.left-1/4     w=500px  -> extends 455px past viewport
        div.absolute.top-1/3.right-1/4  w=400px
        div.absolute.top-0.right-0      w=400px
      These are the decorative blur-[120px] glow blobs. They are
      pointer-events-none so they look harmless, but no ancestor clips them,
      so document.scrollWidth became 494px against a 375px viewport — 119px
      of dead scroll. Content genuinely sat off-screen in RTL.

      NOTE ON THE FIX: we use `overflow-x: clip`, NOT `overflow: hidden`.
      `hidden` creates a scroll container, which silently kills the
      `position: sticky` header. `clip` does not. The `hidden` line before it
      is the fallback for browsers older than 2022.

   2. FLAT, UNSEPARATED CARDS
      Cards are #0b0b16 on a #06060f page — a 2% luminance difference. On a
      phone in daylight the boundaries are invisible. Real borders, a real
      shadow and a real elevation ramp are added below.

   3. NO LIGHT MODE
      Implemented as a token remap keyed off html[data-theme="light"].
      Selectors use [class*="..."] rather than the escaped class form so that
      opacity variants (bg-[#0b0b16]/60) are caught by the same rule.
   ========================================================================== */


/* ==========================================================================
   1. VIEWPORT CONTAINMENT — the mobile side-scroll fix
   ========================================================================== */

html,
body {
  overflow-x: hidden;   /* fallback: browsers older than 2022 */
  overflow-x: clip;     /* preferred: does not break position:sticky */
  max-width: 100%;
}

/* The app shell. Clipping here contains the glow blobs without turning the
   shell into a scroll container. */
#root,
#root > div,
#root > div > div:first-child {
  overflow-x: clip;
  max-width: 100%;
}

/* Belt and braces: never let a decorative glow exceed the viewport. These are
   purely visual, so clamping their width costs nothing. */
[class*="blur-["][class*="absolute"],
[class*="rounded-full"][class*="blur-"] {
  max-width: 100vw;
}

@media (max-width: 767px) {
  /* On a phone the 500px blobs are larger than the screen anyway. Shrink them
     so the blur still reads as ambience instead of a hard edge. */
  [class*="w-[500px]"][class*="blur-"] { width: min(500px, 88vw); }
  [class*="w-[400px]"][class*="blur-"] { width: min(400px, 82vw); }
  [class*="w-[600px]"][class*="blur-"] { width: min(600px, 92vw); }

  /* Anything that still insists on being wider than the screen gets wrapped
     rather than pushing the layout. Common culprits: long URLs, licence keys,
     English product names inside Persian sentences. */
  p, span, h1, h2, h3, h4, li, td, th, label, button, a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Horizontal rails (course carousels, tab bars) should scroll themselves,
     not the page. */
  [class*="overflow-x-auto"],
  [class*="overflow-x-scroll"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  [class*="overflow-x-auto"]::-webkit-scrollbar,
  [class*="overflow-x-scroll"]::-webkit-scrollbar { display: none; }
}

/* Media must never be the thing that widens the page. */
img, video, canvas, svg, iframe, table {
  max-width: 100%;
}


/* ==========================================================================
   2. RESPONSIVE PASS — phone first
   --------------------------------------------------------------------------
   The bundle was laid out desktop-first: grids stay multi-column, the header
   keeps a full pill nav, and padding never relaxes. These rules make the
   phone layout actually a phone layout.
   ========================================================================== */

@media (max-width: 767px) {

  /* Container padding: 16px gutter, consistently. */
  [class*="max-w-7xl"],
  [class*="max-w-6xl"],
  [class*="max-w-5xl"] {
    padding-inline: 16px !important;
    width: 100% !important;
  }

  /* Any multi-column grid collapses to one column. Two-column stays two only
     when its cells are small (badges, stats). */
  [class*="grid-cols-2"]:not([class*="gap-2"]):not([class*="prdx-keep-2"]),
  [class*="grid-cols-3"],
  [class*="grid-cols-4"],
  [class*="md:grid-cols-"],
  [class*="lg:grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  /* Rows that were side-by-side on desktop stack instead of squeezing. */
  [class*="flex"][class*="justify-between"]:not(header *):not([class*="items-center"][class*="gap-1"]) {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* The header nav pill is 343px wide inside a 375px screen with a logo next
     to it — that alone forces a squeeze. Let it scroll on its own axis. */
  header nav[class*="rounded-full"] {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  header nav[class*="rounded-full"]::-webkit-scrollbar { display: none; }
  header nav[class*="rounded-full"] button { flex: 0 0 auto; }

  header [class*="h-20"] { height: 64px !important; }

  /* Display type: the desktop scale overflows two-word Persian headings. */
  h1 { font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important; line-height: 1.55 !important; }
  h2 { font-size: clamp(1.35rem, 6vw, 1.7rem) !important; line-height: 1.6 !important; }
  h3 { font-size: clamp(1.1rem, 5vw, 1.35rem) !important; line-height: 1.65 !important; }

  /* Oversized desktop padding wastes half the screen on a phone. */
  [class*="p-12"], [class*="p-10"] { padding: 20px !important; }
  [class*="px-12"], [class*="px-10"] { padding-inline: 20px !important; }
  [class*="py-24"], [class*="py-20"] { padding-block: 40px !important; }

  /* Sticky bottom bars must clear the iOS home indicator. */
  [class*="fixed"][class*="bottom-0"] {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* iOS zooms the page when a font-size < 16px input is focused. That zoom is a
   second, sneakier cause of "the page moved sideways". */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}


/* ==========================================================================
   3. SURFACE + ELEVATION SYSTEM — visible card boundaries
   --------------------------------------------------------------------------
   Four levels, each visibly distinct from the one below it:
     L0  page        the darkest, no border
     L1  card        +border, +soft shadow
     L2  raised      inside a card (lesson rows, price boxes)
     L3  overlay     modals, dropdowns, toasts
   ========================================================================== */

:root {
  --prdx-radius-card: 18px;
  --prdx-radius-inner: 12px;

  /* dark theme (default) */
  --prdx-line:        rgba(255, 255, 255, 0.085);
  --prdx-line-strong: rgba(255, 255, 255, 0.16);
  --prdx-accent-line: rgba(0, 212, 255, 0.22);
  --prdx-shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px -8px rgba(0,0,0,.65);
  --prdx-shadow-2: 0 2px 6px rgba(0,0,0,.5),  0 18px 40px -16px rgba(0,0,0,.8);
  --prdx-inner-top: inset 0 1px 0 rgba(255,255,255,.055);
}

/* L1 — every card surface in the bundle uses one of these three fills. */
[class^="bg-[#0b0b16]"], [class*=" bg-[#0b0b16]"],
[class^="bg-[#0d0d1a]"], [class*=" bg-[#0d0d1a]"],
[class^="bg-[#121226]"], [class*=" bg-[#121226]"] {
  border: 1px solid var(--prdx-line);
  box-shadow: var(--prdx-shadow-1), var(--prdx-inner-top);
  border-radius: var(--prdx-radius-card);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

/* Cards that already declare a hairline border keep it, but visible. */
[class*="border-white/5"] { border-color: var(--prdx-line) !important; }

/* Interactive cards get a clear hover/press state so taps feel answered. */
@media (hover: hover) {
  a[class*="bg-[#0b0b16]"]:hover,
  [role="button"][class*="bg-[#0b0b16]"]:hover,
  [class*="cursor-pointer"][class*="bg-[#0b0b16]"]:hover {
    border-color: var(--prdx-accent-line);
    box-shadow: var(--prdx-shadow-2);
    transform: translateY(-2px);
  }
}

/* L3 — modals and dropdowns must separate from the page behind them. */
[role="dialog"],
[class*="fixed"][class*="z-50"] > [class*="bg-[#0b0b16]"],
[class*="fixed"][class*="z-50"] > [class*="bg-[#06060f]"] {
  border: 1px solid var(--prdx-line-strong);
  box-shadow: var(--prdx-shadow-2);
}

/* Section rhythm. Without this every block runs into the next one. */
main > section,
main > div > section {
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}

main > section + section::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(90deg, transparent, var(--prdx-line-strong), transparent);
}

/* The sticky header must separate from content once you scroll. */
header[class*="sticky"] {
  border-bottom: 1px solid var(--prdx-line);
  box-shadow: 0 8px 24px -20px rgba(0,0,0,.9);
}

/* Touch targets. Apple and Google both require 44px; several buttons in the
   bundle are 32-38px, which is why taps miss on a phone. */
@media (max-width: 767px) {
  button, a[role="button"] { min-height: 44px; }
  button[class*="rounded-full"][class*="p-1"],
  button[class*="rounded-full"][class*="p-2"] { min-width: 44px; }
}


/* ==========================================================================
   4. LIGHT MODE
   --------------------------------------------------------------------------
   Activated by  <html data-theme="light">  (see parudux-ui-v2.js).

   SELECTOR ANCHORING — READ THIS BEFORE EDITING
   These rules target compiled Tailwind arbitrary values, so they have to match
   on the class attribute rather than on a real class name. The obvious form,
   [class*="bg-[#D4AF37]"], is WRONG: it also matches the variant-prefixed
   selection:bg-[#D4AF37]/30 that sits on the app shell, which turned the whole
   page gold the first time this was written.

   Every utility is therefore matched twice, anchored:
       [class^="util"]     the utility is the first class
       [class*=" util"]    the utility follows a space
   A variant is written prefix:util, so the character before it is ":" and
   neither selector matches. Opacity suffixes (util/30) still match, which is
   what we want.

   Colours were taken from the 30 values actually present in the compiled
   bundle and checked for WCAG AA contrast against their new background.

   KNOWN GAP: assets/index-*.css also hardcodes these colours inside
   hand-written .prdx-* component classes (cart, student dashboard, toasts).
   Those are NOT covered by attribute selectors and still need their own
   overrides. See section 4b.
   ========================================================================== */

html[data-theme="light"] {
  --prdx-line:        rgba(16, 19, 28, 0.10);
  --prdx-line-strong: rgba(16, 19, 28, 0.18);
  --prdx-accent-line: rgba(2, 132, 168, 0.35);
  --prdx-shadow-1: 0 1px 2px rgba(16,19,28,.06), 0 6px 16px -10px rgba(16,19,28,.18);
  --prdx-shadow-2: 0 2px 8px rgba(16,19,28,.08), 0 20px 44px -20px rgba(16,19,28,.26);
  --prdx-inner-top: inset 0 1px 0 rgba(255,255,255,.9);

  color-scheme: light;
  background: #f5f7fb;
}

html[data-theme="light"] [class^="bg-[#06060f]"],
html[data-theme="light"] [class*=" bg-[#06060f]"],
html[data-theme="light"] [class^="bg-[#070714]"],
html[data-theme="light"] [class*=" bg-[#070714]"],
html[data-theme="light"] [class^="bg-[#070711]"],
html[data-theme="light"] [class*=" bg-[#070711]"],
html[data-theme="light"] [class^="bg-[#080814]"],
html[data-theme="light"] [class*=" bg-[#080814]"],
html[data-theme="light"] [class^="bg-[#090915]"],
html[data-theme="light"] [class*=" bg-[#090915]"],
html[data-theme="light"] [class^="bg-[#0A0A0A]"],
html[data-theme="light"] [class*=" bg-[#0A0A0A]"] {
  background-color: #f5f7fb !important;
}

html[data-theme="light"] [class^="bg-[#0b0b16]"],
html[data-theme="light"] [class*=" bg-[#0b0b16]"],
html[data-theme="light"] [class^="bg-[#0d0d1a]"],
html[data-theme="light"] [class*=" bg-[#0d0d1a]"],
html[data-theme="light"] [class^="bg-[#0e0e1e]"],
html[data-theme="light"] [class*=" bg-[#0e0e1e]"],
/* 2026-09-26: five dark panels the first pass missed. #04040d is the
   installment box; left dark it kept its black background while its heading
   turned dark for light mode, so the heading vanished. */
html[data-theme="light"] [class^="bg-[#04040d]"],
html[data-theme="light"] [class*=" bg-[#04040d]"],
html[data-theme="light"] [class^="bg-[#0a0a1d]"],
html[data-theme="light"] [class*=" bg-[#0a0a1d]"],
html[data-theme="light"] [class^="bg-[#0c0c14]"],
html[data-theme="light"] [class*=" bg-[#0c0c14]"],
html[data-theme="light"] [class^="bg-[#0d0d22]"],
html[data-theme="light"] [class*=" bg-[#0d0d22]"],
html[data-theme="light"] [class^="bg-[#0f0f23]"],
html[data-theme="light"] [class*=" bg-[#0f0f23]"],
html[data-theme="light"] [class^="bg-[#1C1C1C]"],
html[data-theme="light"] [class*=" bg-[#1C1C1C]"] {
  background-color: #ffffff !important;
}

html[data-theme="light"] [class^="bg-[#121226]"],
html[data-theme="light"] [class*=" bg-[#121226]"] {
  background-color: #eef2f8 !important;
}

html[data-theme="light"] [class^="bg-[#03030b]"],
html[data-theme="light"] [class*=" bg-[#03030b]"] {
  background-color: #e9edf4 !important;
}

html[data-theme="light"] [class^="text-[#F3E9DC]"],
html[data-theme="light"] [class*=" text-[#F3E9DC]"],
html[data-theme="light"] [class^="text-[#e8eaf0]"],
html[data-theme="light"] [class*=" text-[#e8eaf0]"],
html[data-theme="light"] [class^="text-white"],
html[data-theme="light"] [class*=" text-white"] {
  color: #0f1320 !important;
}

html[data-theme="light"] [class^="text-[#ccd4e0]"],
html[data-theme="light"] [class*=" text-[#ccd4e0]"],
html[data-theme="light"] [class^="text-[#cbd5e1]"],
html[data-theme="light"] [class*=" text-[#cbd5e1]"] {
  color: #39415a !important;
}

html[data-theme="light"] [class^="text-[#a8b4c8]"],
html[data-theme="light"] [class*=" text-[#a8b4c8]"] {
  color: #4c566e !important;
}

html[data-theme="light"] [class^="text-[#6b7a99]"],
html[data-theme="light"] [class*=" text-[#6b7a99]"] {
  color: #646f88 !important;
}

html[data-theme="light"] [class^="text-[#00d4ff]"],
html[data-theme="light"] [class*=" text-[#00d4ff]"],
html[data-theme="light"] [class^="text-[#00e1ff]"],
html[data-theme="light"] [class*=" text-[#00e1ff]"] {
  color: #0270a0 !important;
}

html[data-theme="light"] [class^="text-[#D4AF37]"],
html[data-theme="light"] [class*=" text-[#D4AF37]"],
html[data-theme="light"] [class^="text-[#e5c158]"],
html[data-theme="light"] [class*=" text-[#e5c158]"],
html[data-theme="light"] [class^="text-[#8a6f27]"],
html[data-theme="light"] [class*=" text-[#8a6f27]"] {
  color: #7d6320 !important;
}

html[data-theme="light"] [class^="text-[#7c3aed]"],
html[data-theme="light"] [class*=" text-[#7c3aed]"],
html[data-theme="light"] [class^="text-[#8b5cf6]"],
html[data-theme="light"] [class*=" text-[#8b5cf6]"] {
  color: #6425d0 !important;
}

html[data-theme="light"] [class^="text-[#8B0000]"],
html[data-theme="light"] [class*=" text-[#8B0000]"],
html[data-theme="light"] [class^="text-[#fb2c36]"],
html[data-theme="light"] [class*=" text-[#fb2c36]"] {
  color: #9a1212 !important;
}

html[data-theme="light"] [class^="bg-[#00d4ff]"],
html[data-theme="light"] [class*=" bg-[#00d4ff]"],
html[data-theme="light"] [class^="bg-[#00e1ff]"],
html[data-theme="light"] [class*=" bg-[#00e1ff]"] {
  background-color: #0284a8 !important;
  color: #ffffff !important;
}

html[data-theme="light"] [class^="bg-[#D4AF37]"],
html[data-theme="light"] [class*=" bg-[#D4AF37]"],
html[data-theme="light"] [class^="bg-[#e5c158]"],
html[data-theme="light"] [class*=" bg-[#e5c158]"] {
  background-color: #c79a22 !important;
  color: #17130a !important;
}

html[data-theme="light"] [class^="bg-[#7c3aed]"],
html[data-theme="light"] [class*=" bg-[#7c3aed]"],
html[data-theme="light"] [class^="bg-[#8b5cf6]"],
html[data-theme="light"] [class*=" bg-[#8b5cf6]"] {
  background-color: #6d34d6 !important;
  color: #ffffff !important;
}

html[data-theme="light"] [class^="bg-[#8B0000]"],
html[data-theme="light"] [class*=" bg-[#8B0000]"] {
  background-color: #a31414 !important;
  color: #ffffff !important;
}

html[data-theme="light"] [class^="border-[#00d4ff]"],
html[data-theme="light"] [class*=" border-[#00d4ff]"] {
  border-color: rgba(2,132,168,.35) !important;
}

html[data-theme="light"] [class^="border-[#D4AF37]"],
html[data-theme="light"] [class*=" border-[#D4AF37]"] {
  border-color: rgba(199,154,34,.45) !important;
}

html[data-theme="light"] [class^="blur-[120px]"],
html[data-theme="light"] [class*=" blur-[120px]"],
html[data-theme="light"] [class^="blur-[100px]"],
html[data-theme="light"] [class*=" blur-[100px]"] {
  opacity: .30 !important;
}

/* -- pieces that need special handling ------------------------------------ */

/* Dark-to-transparent gradients invert the wrong way. Neutralise them. */
html[data-theme="light"] [class^="from-[#06060f]"],
html[data-theme="light"] [class*=" from-[#06060f]"],
html[data-theme="light"] [class^="from-[#0e0e1e]"],
html[data-theme="light"] [class*=" from-[#0e0e1e]"],
html[data-theme="light"] [class^="via-[#090915]"],
html[data-theme="light"] [class*=" via-[#090915]"],
html[data-theme="light"] [class^="via-[#0b0b16]"],
html[data-theme="light"] [class*=" via-[#0b0b16]"] {
  --tw-gradient-from: #f5f7fb !important;
  --tw-gradient-via:  #eef2f8 !important;
}

/* The sticky header is translucent black; make it translucent white. */
html[data-theme="light"] header[class*="sticky"] {
  background-color: rgba(255,255,255,.86) !important;
  border-bottom-color: var(--prdx-line) !important;
}

html[data-theme="light"] [class*="border-white/5"],
html[data-theme="light"] [class*="border-white/10"] { border-color: var(--prdx-line) !important; }

/* Never filter real imagery. */
html[data-theme="light"] img,
html[data-theme="light"] video { filter: none !important; }

/* Form fields need a visible boundary on white. */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background-color: #ffffff !important;
  color: #0f1320 !important;
  border: 1px solid var(--prdx-line-strong) !important;
}
html[data-theme="light"] ::placeholder { color: #8a93a8 !important; }


/* ==========================================================================
   4b. LIGHT MODE for the hand-written component CSS
   --------------------------------------------------------------------------
   assets/index-*.css and parudux-*.css style the cart, the student dashboard
   and the toasts with real class names and hardcoded dark hex values. Those
   need explicit overrides — attribute selectors cannot reach them.
   This list is INCOMPLETE and needs a visual pass over every panel.
   ========================================================================== */

html[data-theme="light"] .prdx-cart-shell,
html[data-theme="light"] .prdx-student-shell { background: #f5f7fb; color: #0f1320; }

html[data-theme="light"] .prdx-cart-card,
html[data-theme="light"] .prdx-panel,
html[data-theme="light"] .prdx-student-sidebar,
html[data-theme="light"] .prdx-modal > div {
  background: #ffffff;
  color: #0f1320;
  border-color: var(--prdx-line);
}

html[data-theme="light"] .prdx-table th { background: #eef2f8; color: #39415a; }
html[data-theme="light"] .prdx-table td { border-color: var(--prdx-line); }
html[data-theme="light"] .prdx-muted,
html[data-theme="light"] .prdx-breadcrumb { color: #646f88; }
html[data-theme="light"] .prdx-student-nav button { color: #39415a; }
html[data-theme="light"] .prdx-student-nav button.active { background: #eef2f8; color: #0f1320; }


/* ==========================================================================
   5. FOCUS + MOTION — accessibility floor
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
  border-radius: 6px;
}
html[data-theme="light"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: #0284a8;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   6. THEME TOGGLE BUTTON
   ========================================================================== */

.prdx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--prdx-line-strong);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, transform .12s;
}
.prdx-theme-toggle:hover  { border-color: var(--prdx-accent-line); }
.prdx-theme-toggle:active { transform: scale(.94); }
.prdx-theme-toggle svg    { width: 18px; height: 18px; }
.prdx-theme-toggle .prdx-icon-sun { display: none; }
html[data-theme="light"] .prdx-theme-toggle .prdx-icon-sun  { display: block; }
html[data-theme="light"] .prdx-theme-toggle .prdx-icon-moon { display: none; }


/* ==========================================================================
   7. PRE-GATEWAY NOTICE (VPN / connection check)
   ========================================================================== */

.prdx-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 3, 11, .72);
  backdrop-filter: blur(6px);
}
.prdx-gate__card {
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px;
  padding: 24px;
  background: #0b0b16;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
  color: #F3E9DC;
  text-align: right;
  direction: rtl;
}
html[data-theme="light"] .prdx-gate__card {
  background: #ffffff;
  color: #0f1320;
  border-color: rgba(16,19,28,.14);
}
.prdx-gate__icon   { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.prdx-gate__title  { font-size: 1.15rem; font-weight: 800; margin: 0 0 10px; }
.prdx-gate__body   { font-size: .95rem; line-height: 1.95; margin: 0 0 8px; opacity: .88; }
.prdx-gate__flag {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 12px; padding: 12px 14px; margin: 14px 0;
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.35);
  font-size: .9rem; line-height: 1.85;
}
.prdx-gate__actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.prdx-gate__btn {
  flex: 1 1 140px; min-height: 48px; border-radius: 12px; border: 0;
  font-weight: 800; font-size: .95rem; cursor: pointer;
  font-family: inherit;
}
.prdx-gate__btn--go     { background: #00d4ff; color: #04121a; }
.prdx-gate__btn--cancel { background: transparent; color: inherit; border: 1px solid var(--prdx-line-strong); }
html[data-theme="light"] .prdx-gate__btn--go { background: #0284a8; color: #fff; }
.prdx-gate__meta { font-size: .78rem; opacity: .6; margin-top: 12px; }


/* ==========================================================================
   8. CLICKABLE COURSE CARDS
   --------------------------------------------------------------------------
   Every course card on the site now opens its course page. The affordance has
   to match the behaviour, or people will not discover it.
   ========================================================================== */

.prdx-course-card-clickable {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
  .prdx-course-card-clickable:hover { transform: translateY(-3px); }
  .prdx-course-card-clickable:hover img { filter: brightness(1.06); }
}
.prdx-course-card-clickable:active { transform: translateY(-1px) scale(.995); }
.prdx-course-card-clickable img { transition: filter .18s ease; }

/* The cart row becomes a link to the course. It must still read as a row,
   not as a button, so every default button style is stripped. */
.prdx-cart-item-link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
  border-radius: 14px;
  transition: background-color .18s ease;
}
.prdx-cart-item-link:hover { background: rgba(255, 255, 255, .045); }
html[data-theme="light"] .prdx-cart-item-link:hover { background: rgba(16, 19, 28, .04); }
.prdx-cart-item-link img { flex: 0 0 auto; }
.prdx-cart-item-link .prdx-cart-item-main { min-width: 0; }
.prdx-cart-item-link h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.prdx-cart-item-go {
  font-size: .72rem;
  font-weight: 700;
  opacity: 0;
  color: #00d4ff;
  transform: translateX(4px);
  transition: opacity .18s ease, transform .18s ease;
}
html[data-theme="light"] .prdx-cart-item-go { color: #0270a0; }
.prdx-cart-item-link:hover .prdx-cart-item-go,
.prdx-cart-item-link:focus-visible .prdx-cart-item-go { opacity: 1; transform: translateX(0); }

/* On touch there is no hover, so the hint is always visible but quiet. */
@media (hover: none) {
  .prdx-cart-item-go { opacity: .7; transform: none; }
}

/* ==========================================================================
   9. STUDENT: device release
   --------------------------------------------------------------------------
   The path a student takes after changing PC. The licence does not change —
   only the device slot is freed — and the wording has to say so, because the
   instinct is to assume the licence is dead and ask for a new one.
   ========================================================================== */

.prdx-note-inline {
  background: rgba(0, 212, 255, .08);
  border: 1px solid rgba(0, 212, 255, .28);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 2;
}
html[data-theme="light"] .prdx-note-inline {
  background: rgba(2, 132, 168, .07);
  border-color: rgba(2, 132, 168, .3);
}
.prdx-mini.is-pending {
  display: inline-flex;
  align-items: center;
  opacity: .75;
  cursor: default;
  background: rgba(240, 169, 47, .16);
  color: #f0a92f;
  border: 1px solid rgba(240, 169, 47, .35);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11px;
}