/* =========================================================
   Masters Computer Academy — Course PDF download
   Download button (in each course's CTA) + lead-capture modal.
   Loads after styles.css / pages.css for design tokens.
   ========================================================= */

/* ---- CTA buttons row inside a course card ---- */
.cta-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn-dl{
  background:linear-gradient(135deg,var(--royal),var(--grape));color:#fff;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5em;
  box-shadow:0 10px 24px rgba(51,80,224,.3);transition:transform .16s,box-shadow .2s;
}
.btn-dl svg{flex:none}
.btn-dl:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(51,80,224,.45)}
.btn-dl:active{transform:translateY(0)}

/* ---- modal shell ---- */
.dl-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.dl-modal[hidden]{display:none}
.dl-backdrop{position:absolute;inset:0;background:rgba(8,12,32,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .28s}
.dl-modal.open .dl-backdrop{opacity:1}
.dl-card{
  position:relative;width:100%;max-width:440px;background:var(--card,#fff);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 90px rgba(6,10,30,.5);
  transform:translateY(24px) scale(.96);opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.dl-modal.open .dl-card{transform:none;opacity:1}
.dl-x{position:absolute;top:10px;right:12px;z-index:2;background:none;border:none;font-size:1.9rem;line-height:1;color:var(--muted);cursor:pointer;width:40px;height:40px;border-radius:50%;transition:.18s}
.dl-x:hover{background:var(--paper);color:var(--ink)}

/* ---- form ---- */
.dl-body{padding:30px 30px 26px}
.dl-eyebrow{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--royal);background:rgba(51,80,224,.1);padding:.4em .85em;border-radius:999px;margin-bottom:13px}
.dl-title{font-size:1.3rem;color:var(--ink);margin:0 0 6px;line-height:1.22}
.dl-sub{font-size:.9rem;color:var(--muted);margin:0 0 20px;line-height:1.55}
.dl-sub b{color:var(--ink)}

.dl-fld{position:relative;margin-bottom:14px}
.dl-fld input{
  width:100%;padding:1.25em 1em .55em;border:1.5px solid var(--line);border-radius:12px;
  background:var(--paper);font:inherit;color:var(--text);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.dl-fld input:focus{border-color:var(--royal);box-shadow:var(--ring);background:#fff;outline:none}
.dl-fld label{
  position:absolute;left:1.02em;top:1.02em;color:var(--muted-2);font-size:.96rem;pointer-events:none;
  transition:transform .16s ease,color .16s ease,font-size .16s ease;transform-origin:left top;
}
.dl-fld input:focus + label,
.dl-fld input:not(:placeholder-shown) + label{
  transform:translateY(-.62em);font-size:.66rem;color:var(--royal);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.dl-err{background:#fdeaea;color:#c0392b;border:1px solid #f5c6c6;border-radius:10px;padding:.6em .85em;font-size:.85rem;margin:0 0 12px;animation:dl-in .25s ease}

.dl-submit{
  width:100%;color:#fff;border:none;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:linear-gradient(135deg,var(--royal),var(--grape));box-shadow:0 12px 26px rgba(51,80,224,.4);
}
.dl-submit:hover{box-shadow:0 14px 32px rgba(51,80,224,.5)}
.dl-submit[disabled]{cursor:progress;opacity:.9}
.dl-spin{display:none;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:dl-spin .7s linear infinite}
.dl-submit.busy .dl-spin{display:inline-block}
.dl-submit.busy .dl-submit-label{opacity:.85}
@keyframes dl-spin{to{transform:rotate(360deg)}}
.dl-fine{text-align:center;font-size:.74rem;color:var(--muted-2);margin:14px 0 0;line-height:1.5}

/* ---- success ---- */
.dl-done{padding:34px 30px 30px;text-align:center;animation:dl-in .4s ease both}
@keyframes dl-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dl-check{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(135deg,var(--teal,#0ea5a4),#12c3c1);display:grid;place-items:center;box-shadow:0 14px 32px rgba(14,165,164,.45);animation:dl-pop .55s cubic-bezier(.22,1.4,.36,1) both}
.dl-check svg{width:38px;height:38px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32;animation:dl-draw .5s .25s ease forwards}
@keyframes dl-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes dl-draw{to{stroke-dashoffset:0}}
.dl-done h3{font-size:1.3rem;color:var(--ink);margin:0 0 8px}
.dl-done p{font-size:.9rem;color:var(--muted);margin:0 0 18px;line-height:1.55}
.dl-done p b{color:var(--ink)}
.dl-get{width:100%;background:linear-gradient(135deg,var(--royal),var(--grape));color:#fff;border:none;font-weight:700;box-shadow:0 12px 26px rgba(51,80,224,.4)}
.dl-get:hover{box-shadow:0 14px 32px rgba(51,80,224,.5)}
.dl-get[hidden]{display:none}
.dl-done-or{font-size:.8rem;color:var(--muted-2);margin:16px 0 10px}
.dl-wa{width:100%;background:#25d366;color:#053d1c;border:none;font-weight:700;box-shadow:0 12px 26px rgba(37,211,102,.4)}
.dl-wa:hover{background:#20c65c;box-shadow:0 14px 32px rgba(37,211,102,.5)}
.dl-again{display:block;margin:14px auto 0;background:none;border:none;color:var(--royal);font:inherit;font-weight:600;cursor:pointer;font-size:.82rem}
.dl-again:hover{text-decoration:underline}

/* ---- responsive / motion ---- */
@media (max-width:520px){
  .dl-body{padding:26px 22px 22px}
  .dl-done{padding:30px 22px 24px}
  .cta-btns .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dl-backdrop,.dl-card,.dl-done,.dl-check,.dl-check svg,.btn-dl{transition:none;animation:none}
  .dl-check svg{stroke-dashoffset:0}
}