/* ==========================================================================
   THE CART DRAWER
   Slides in from the right over whatever page sold the course. Full height, its
   own scroll, with the total and the checkout pinned to the floor so they are
   reachable without scrolling a long basket.
   ========================================================================== */
.cdrawer{position:fixed;inset:0;z-index:140}
.cdrawer[hidden]{display:none}
.cd-scrim{position:absolute;inset:0;background:rgba(7,19,36,.5);
  opacity:0;transition:opacity .24s ease-out}
.cdrawer.is-open .cd-scrim{opacity:1}

.cd-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);
  display:flex;flex-direction:column;background:var(--white);
  box-shadow:-24px 0 60px rgba(7,19,36,.22);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.7,.3,1)}
.cdrawer.is-open .cd-panel{transform:none}

/* ---------- head ---------- */
.cd-head{display:flex;align-items:center;gap:12px;flex:none;
  padding:20px 22px;border-bottom:1px solid var(--slate-200)}
.cd-head-ic{display:inline-flex;color:var(--navy-900)}
.cd-head-ic svg{width:24px;height:24px}
.cd-head h2{flex:1 1 auto;font-size:1.32rem;letter-spacing:-.022em;color:var(--navy-900)}
.cd-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;
  padding:0 8px;border-radius:var(--r-pill);background:var(--brand-50);color:var(--brand-700);
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500}
.cd-x{display:inline-flex;padding:6px;border:0;background:none;color:var(--slate-500);cursor:pointer;border-radius:var(--r-btn)}
.cd-x:hover{color:var(--navy-900);background:var(--paper-50)}
.cd-x svg{width:22px;height:22px}

.cd-scroll{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.cd-body{flex:1 1 auto;overflow-y:auto;padding:18px 22px;display:grid;gap:14px;align-content:start}

/* ---------- one course ---------- */
.cd-item{border:1px solid var(--slate-200);border-radius:var(--r-panel);background:var(--white);padding:16px 17px}
.cd-item-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:start}
.cd-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--r-card);background:var(--brand-50);color:var(--brand-700)}
.cd-mark svg{width:19px;height:19px}
.cd-id{min-width:0}
.cd-code{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--slate-600);margin-bottom:3px}
.cd-id h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.28;
  letter-spacing:-.018em;color:var(--navy-900)}
.cd-qty{display:block;margin-top:4px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}
.cd-price{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.16rem;letter-spacing:-.024em;
  color:var(--navy-900);white-space:nowrap}
.cd-price del{display:block;font-size:.8rem;font-weight:500;color:var(--slate-500)}
.cd-del{display:inline-flex;padding:4px;color:var(--slate-500);border-radius:var(--r-btn)}
.cd-del:hover{color:var(--brand-700);background:var(--paper-50)}
.cd-del svg{width:18px;height:18px}

.cd-inc{list-style:none;display:grid;gap:8px;margin:14px 0 0;padding:0}
.cd-inc li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;color:var(--navy-800);line-height:1.45}
.cd-inc svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--accent-800)}

.cd-edit{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.92rem;
  color:var(--accent-800);text-decoration:underline;text-underline-offset:3px}
.cd-edit svg{width:15px;height:15px}




/* ---------- empty ---------- */
.cd-empty{text-align:center;padding:48px 10px}
.cd-empty-mark{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:50%;background:var(--paper-50);color:var(--slate-400);margin-bottom:16px}
.cd-empty-mark svg{width:28px;height:28px}
.cd-empty h3{font-size:1.1rem;letter-spacing:-.02em;color:var(--navy-900)}
.cd-empty p{margin:9px auto 20px;max-width:34ch;font-size:.93rem;color:var(--slate-600);line-height:1.6}

/* ---------- floor ---------- */
.cd-foot{flex:none;padding:18px 22px 22px;border-top:1px solid var(--slate-200);background:var(--paper-50)}
.cd-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.cd-total .mono{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-600)}
.cd-total b{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.9rem;
  letter-spacing:-.032em;color:var(--navy-900)}
.cd-go{width:100%;justify-content:center}
.cd-note{margin-top:12px;font-size:.79rem;line-height:1.55;color:var(--slate-600);text-align:center}

body.cd-locked{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .cd-panel,.cd-scrim{transition:none}
}
@media(max-width:520px){
  .cd-body,.cd-head,.cd-foot{padding-left:16px;padding-right:16px}
  .cd-item-top{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}
  .cd-del{grid-column:3;grid-row:1}
  .cd-price{grid-column:2/4}
}

/* ---------- YOUR EXAM ----------
   Two rows that only make sense together: the attempt already paid for, and
   the one that costs extra. Read apart, a $150 retake voucher looks like the
   exam is not included at all.

   Each row is a short bold label with the long wording underneath it. The
   certification's own sentence — "Exam voucher for this certification, valid
   for 12 months" — cannot share a line with a price, and wrapping it around
   the badge is what made the first version look broken. */
.cd-addons{margin-top:16px;padding-top:14px;border-top:1px solid var(--slate-200)}
.cd-addons-h{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-600);margin-bottom:10px}

/* Settling the exam and buying a course at a discount are two decisions, so
   they are two blocks. The gap between them is wider than the gap between rows
   inside one, which is the whole of what tells them apart - a second rule
   across a panel this narrow reads as the end of the panel. */
.cd-group + .cd-group{margin-top:18px}

.cd-addon{display:grid;grid-template-columns:20px 1fr auto;align-items:start;
  gap:12px;padding:12px 14px;border:1px solid var(--slate-200);border-radius:10px;
  background:var(--white)}
.cd-addon + .cd-addon{margin-top:8px}

.cd-addon-lab{min-width:0;line-height:1.4}
.cd-addon-lab b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;
  font-size:.9rem;color:var(--navy-900)}
.cd-addon-lab em{display:block;margin-top:3px;font-style:normal;font-size:.79rem;
  color:var(--slate-500);line-height:1.4}

.cd-addon-price{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.9rem;
  color:var(--navy-900);white-space:nowrap;padding-top:1px}

/* The included attempt is a statement, not a control: no box to tick, a tick
   already drawn, and the price column says what it costs — nothing. */
.cd-addon--in{background:var(--paper-50);border-color:var(--slate-200)}
.cd-addon-tick{display:inline-flex;width:20px;height:20px;align-items:center;
  justify-content:center;border-radius:50%;background:var(--accent-500);
  color:var(--navy-900);margin-top:1px}
.cd-addon-tick svg{width:11px;height:11px}
.cd-addon-price--in{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent-800);
  background:var(--accent-100);border-radius:var(--r-pill);padding:4px 8px}

/* The one that costs money. The native box is hidden and drawn instead, so the
   checked state can be the whole row rather than a system-coloured square. */
.cd-addon--buy{cursor:pointer;transition:border-color .15s ease-out,background .15s ease-out}
.cd-addon--buy:hover{border-color:var(--slate-400)}
.cd-addon--buy input{position:absolute;opacity:0;width:0;height:0}
.cd-addon-box{display:inline-flex;width:20px;height:20px;align-items:center;
  justify-content:center;border:1.5px solid var(--slate-400);border-radius:6px;
  background:var(--white);color:transparent;margin-top:1px;
  transition:all .15s ease-out}
.cd-addon-box svg{width:11px;height:11px}

.cd-addon--buy input:checked ~ .cd-addon-box,
.cd-addon--buy.is-on .cd-addon-box{background:var(--accent-500);border-color:var(--accent-500);
  color:var(--navy-900)}
.cd-addon--buy:has(input:checked),
.cd-addon--buy.is-on{border-color:var(--accent-500);background:var(--accent-50,#EFFEFB)}

.cd-addon--buy input:focus-visible ~ .cd-addon-box{outline:2px solid var(--accent-800);
  outline-offset:2px}

.cd-addon.is-busy{opacity:.5;pointer-events:none}