/* ===========================================================================
   The enrol panel.

   Lifted out of site.css so a page that is not built on site.css can still
   open it. The flow it belongs to -- press Enrol, give three details, pay in
   a Razorpay window over the top -- is unchanged; this is the same CSS, in a
   file of its own, and site.css still carries its own copy for the pages
   that load it.

   It leans on two variables for the brand colour and the hairline, with
   fallbacks, so it looks right on either theme.
   ========================================================================= */
/* The panel reads nine variables. site.css defines most of them; three
   (--bg-2, --brand-50, --muted) it uses without ever defining, so they
   resolved to nothing and the panel quietly lost a background here and a
   caption colour there. All nine are set here, in the course page's palette,
   and only inside the panel so nothing else on the page is touched. */
.buy-panel,.buy-scrim{
  --ink:#0D084D; --ink-2:#55597A; --muted:#696C89;
  --line:#E4E8EF; --bg-2:#F6F8FB;
  --brand:#1362B1; --brand-50:#EEF5FC;
  --cta:#1362B1; --cta-deep:#0970C4;
}
/* --- buying without an account ------------------------------------------- */
/* Somebody who read the page and pressed Enrol has decided. Sending them to a
   login form asks them to start a second, unrelated task, and a good share
   never come back — so the panel slides over the course instead, and the page
   they were reading stays visible behind it. */
.buy-scrim{position:fixed;inset:0;background:rgba(12,13,30,.5);z-index:120;
  opacity:0;transition:opacity .24s ease}
.buy-scrim.on{opacity:1}

/* White, not the page's own background — a panel that matches the page it
   covers stops reading as a separate thing sitting on top of it. */
.buy-panel{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:130;
  background:#fff;box-shadow:-18px 0 50px rgba(12,13,30,.22);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.buy-panel.on{transform:none}

/* The close button used to sit on the first text line, which put it level
   with the small kicker rather than with the title it belongs to. It is
   pinned to the corner now and the text is given room to clear it. */
.bp-head{position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:20px 58px 16px 22px;border-bottom:1px solid var(--line,#E6E7EF)}
.bp-kick{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted,#6B7280)}
.bp-head h2{font-size:17px;font-weight:700;line-height:1.35;margin-top:5px;
  /* two lines at most, so the header never pushes the form off a phone */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;
  background:none;border-radius:9px;font-size:22px;line-height:1;
  color:var(--muted,#6B7280);cursor:pointer;
  display:grid;place-items:center;transition:background .14s,color .14s}
.bp-x:hover{background:var(--bg-2,#F4F5FA);color:var(--ink,#12132B)}
.bp-x:focus-visible{outline:2px solid var(--brand,#1571C6);outline-offset:2px}

.bp-body{flex:1;overflow-y:auto;padding:20px 22px 26px}
.bp-sec{margin-bottom:22px}
.bp-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted,#6B7280);margin-bottom:10px}

.bp-plans{display:flex;flex-direction:column;gap:9px}
.bp-plan{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  border:1.5px solid var(--line,#E6E7EF);border-radius:12px;background:#fff;
  transition:border-color .14s,background .14s}
.bp-plan:hover{border-color:var(--cta,#1571C6)}
.bp-plan.on{border-color:var(--cta,#1571C6);background:#EAF4FD}
.bp-plan input{margin:0;flex:none;accent-color:var(--cta,#1571C6)}
.bp-p-t{flex:1;min-width:0}
.bp-p-t b{display:block;font-size:14.5px;font-weight:600}
.bp-p-t em{display:block;font-style:normal;font-size:12.5px;color:var(--muted,#6B7280);
  margin-top:2px}
.bp-p-a{flex:none;font-size:15px;font-weight:800;letter-spacing:-.02em}

.bp-single{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-radius:12px;background:var(--bg-2,#F4F5FA);margin-bottom:22px}
.bp-single span{font-size:14px;font-weight:600}
.bp-single em{display:block;font-style:normal;font-size:12.5px;font-weight:400;
  color:var(--muted,#6B7280);margin-top:2px}
.bp-single b{font-size:19px;font-weight:800;letter-spacing:-.02em}

.bp-f{margin-bottom:14px}
.bp-f label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
/* Every one of these is required, and saying so beats finding out on submit. */
.bp-f .req{font-style:normal;color:#D9455F;margin-left:1px}
.bp-f input{width:100%;padding:12px 14px;font:inherit;font-size:15px;
  border:1.5px solid var(--line,#E6E7EF);border-radius:11px;background:#fff}
.bp-f input:focus{outline:none;border-color:var(--cta,#1571C6);
  box-shadow:0 0 0 3px rgba(21,113,198,.14)}
.bp-f small{display:block;font-size:12px;color:var(--muted,#6B7280);margin-top:5px}
.bp-f small a{color:var(--cta-deep,#0F5BA3);font-weight:600}
/* Said under the field it is about, not in a heap at the bottom. */
.bp-fe{color:#B42318;font-weight:600}
.bp-f input.bad{border-color:#E4707F}
.bp-f input.bad:focus{box-shadow:0 0 0 3px rgba(217,69,95,.15)}

.bp-err{background:#FDECEA;color:#B42318;border-radius:10px;padding:11px 14px;
  font-size:13.5px;margin-bottom:14px}
/* "You already have an account" is not a failure, so it does not look like one. */
.bp-err.is-note{background:#EAF4FD;color:var(--ink-2,#3A3D52)}

.bp-go{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 20px;border:0;border-radius:12px;cursor:pointer;
  background:var(--cta,#1571C6);color:#fff;font:inherit;font-size:15.5px;font-weight:700}
.bp-go i{font-style:normal;opacity:.72;font-weight:600}
.bp-go:hover{background:var(--cta-deep,#0F5BA3)}
.bp-go:disabled,.bp-go.is-busy{opacity:.6;cursor:progress}

/* Resetting a forgotten password, inside the panel. A link out to /forgot
   in the middle of a purchase is a purchase abandoned. */
.bp-reset{border:1.5px solid var(--line,#E6E7EF);border-radius:12px;
  background:var(--bg-2,#F7F8FC);padding:14px;margin-bottom:14px}
.bp-reset-t{font-size:13px;line-height:1.5;color:var(--ink-2,#3A3D52);margin-bottom:11px}
.bp-reset-go{width:100%;justify-content:center;margin-bottom:10px}
.bp-reset .bp-f input{background:#fff}
/* A button that reads as a link: it belongs in a sentence, but it opens
   something on this page rather than going anywhere. */
.bp-link{border:0;background:none;padding:0;font:inherit;font-size:inherit;
  color:var(--cta-deep,#0F5BA3);font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.bp-link:hover{color:var(--cta,#1571C6)}

/* Signed in: who is buying, on one line, with a way out if it is not them. */
.bp-who{display:flex;align-items:center;gap:12px;margin-bottom:22px;
  padding:12px 14px;border:1.5px solid var(--line,#E6E7EF);border-radius:12px;
  background:var(--bg-2,#F7F8FC)}
.bp-who-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--cta,#1571C6);color:#fff;
  font-weight:800;font-size:15px}
.bp-who-t{flex:1;min-width:0}
.bp-who-t b{display:block;font-size:14.5px;font-weight:600}
.bp-who-t em{display:block;font-style:normal;font-size:12.5px;color:var(--muted,#6B7280);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-who-x{flex:none;border:0;background:none;padding:0;font:inherit;font-size:13px;
  font-weight:600;color:var(--cta-deep,#0F5BA3);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
/* Folded away rather than removed: anything that fails validation has to be
   able to show itself again. */
.bp-sec.shut{display:none}

.bp-note{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;color:var(--muted,#6B7280)}
.bp-note svg{width:14px;height:14px}
.bp-note a{color:var(--cta-deep,#0F5BA3);font-weight:600}

/* On a phone it rises from the bottom instead of sliding in from the side,
   stopping short of the top so the course page stays visible behind it. A
   full-height panel that fills a 390px screen is indistinguishable from
   having been sent to another page, which is exactly what this replaced. */
@media (max-width:520px){
  .buy-panel{top:auto;left:0;right:0;bottom:0;width:100%;
    max-height:92vh;max-height:92dvh;
    border-radius:20px 20px 0 0;
    box-shadow:0 -14px 44px rgba(12,13,30,.3);
    transform:translateY(100%)}
  .buy-panel.on{transform:none}
  /* The grab handle every sheet has, so it reads as one at a glance. */
  .bp-head{padding:20px 18px 14px}
  .bp-head::before{content:"";position:absolute;top:8px;left:50%;
    transform:translateX(-50%);width:38px;height:4px;border-radius:999px;
    background:var(--line,#E6E7EF)}
  .bp-x{top:18px}
  .bp-body{padding:18px 18px 24px;
    /* Clear of the home indicator on a phone with no buttons. */
    padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .buy-panel,.buy-scrim{transition:none}
}

/* What a free PDF preview is holding back. Without this line somebody reaches
   the last page and concludes the file is broken rather than that it is a
   sample. */
.pv-more{margin-top:12px;padding:11px 15px;border-radius:10px;font-size:13.5px;
  background:var(--brand-50,#EAF4FD);color:var(--ink-2,#3A3D52)}
.pv-more b{color:var(--ink,#12132B)}

/* --- a discount code in the buy panel ------------------------------------ */
/* A line somebody with no code can ignore, rather than an empty box asking
   to be filled in. */
.bp-coupon{margin-bottom:14px}
.bp-cp-open{display:inline-flex;align-items:center;gap:7px;border:0;background:none;
  padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--cta-deep,#0F5BA3);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bp-cp-open svg{width:15px;height:15px}
.bp-cp-row{display:flex;gap:8px}
.bp-cp-row .input{flex:1;padding:11px 13px;font:inherit;font-size:14.5px;
  border:1.5px solid var(--line,#E6E7EF);border-radius:10px;background:#fff;
  letter-spacing:.06em}
.bp-cp-row .input:focus{outline:none;border-color:var(--brand,#1571C6)}
.bp-cp-msg{margin-top:7px;font-size:12.5px;color:#B42318}
.bp-cp-msg.good{color:#0F7B3F;font-weight:600}