/* SkillzBook premium — global polish: section loader, count-ups, progress fills, info popover, first-run tour. */

/* ---------- Section / navigation loader ---------- */
#sb-loader{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;
  background:rgba(28,21,40,.74);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .16s ease}
#sb-loader.on{display:flex;opacity:1}
#sb-loader .sb-ld{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
#sb-loader .sb-ld .ring{position:absolute;border-radius:50%}
#sb-loader .sb-ld .r1{inset:0;border:4px solid rgba(255,255,255,.15);border-top-color:#b794f6;animation:sbspin 1s linear infinite}
#sb-loader .sb-ld .r2{inset:16px;border:4px solid transparent;border-right-color:#7c3aed;animation:sbspin 1.7s linear infinite reverse}
#sb-loader .sb-ld img{width:78px;height:78px;border-radius:18px;animation:sbbob 2.2s ease-in-out infinite}
#sb-loader .sb-ld-cap{position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:#e9ddfb}
@keyframes sbspin{to{transform:rotate(360deg)}}
@keyframes sbbob{0%,100%{transform:scale(.97)}50%{transform:scale(1.03)}}

/* ---------- Progress bar fill-in ---------- */
.sb-fill-anim{transition:width 1.1s cubic-bezier(.22,.61,.36,1)!important}

/* ---------- Info popover (Zp / rewards explainer, etc.) ---------- */
.sb-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1.4px solid currentColor;font:800 10px/1 "JetBrains Mono",monospace;cursor:pointer;opacity:.55;
  margin-left:6px;vertical-align:middle;user-select:none;transition:opacity .12s}
.sb-info:hover{opacity:1}
.sb-pop{position:fixed;z-index:12050;max-width:290px;background:#1c1528;color:#f3effa;border-radius:13px;
  padding:14px 17px;font:400 13px/1.55 "Archivo",sans-serif;box-shadow:0 20px 56px -18px rgba(0,0,0,.65);display:none}
.sb-pop.on{display:block;animation:sbpop .15s ease}
.sb-pop b{color:#c5a6f7;font-weight:700}
.sb-pop .sb-pop-h{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#b794f6;margin-bottom:7px}
.sb-pop:after{content:"";position:absolute;top:-6px;left:var(--ax,calc(50% - 6px));width:12px;height:12px;background:#1c1528;transform:rotate(45deg)}
@keyframes sbpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- First-run tour ---------- */
.sb-tour-mask{position:fixed;inset:0;z-index:12100;background:rgba(28,21,40,.6);backdrop-filter:blur(2px);display:none}
.sb-tour-mask.on{display:block}
.sb-tour-card{position:fixed;z-index:12110;max-width:320px;background:#fff;color:#1c1528;border-radius:16px;
  padding:20px 22px;box-shadow:0 24px 70px -20px rgba(28,21,40,.5);display:none}
.sb-tour-card.on{display:block;animation:sbpop .2s ease}
.sb-tour-card h4{margin:0 0 6px;font-size:16px;font-weight:800}
.sb-tour-card p{margin:0 0 14px;font-size:13.5px;color:#5d546f;line-height:1.5}
.sb-tour-foot{display:flex;align-items:center;justify-content:space-between}
.sb-tour-dots{display:flex;gap:5px}.sb-tour-dots i{width:6px;height:6px;border-radius:50%;background:#e0d4f5;display:block}.sb-tour-dots i.on{background:#7c3aed}
.sb-tour-btn{background:#7c3aed;color:#fff;border:0;border-radius:9px;padding:8px 16px;font-weight:700;font-size:13px;cursor:pointer}
.sb-tour-skip{background:transparent;border:0;color:#8a809c;font-size:12.5px;cursor:pointer}
.sb-tour-spot{position:fixed;z-index:12105;border-radius:14px;box-shadow:0 0 0 9999px rgba(28,21,40,.6);pointer-events:none;transition:all .25s ease;display:none}
.sb-tour-spot.on{display:block}

/* ---------- Catalogue: keep the tabs + search reachable on long lists ---------- */
.sb-cat-filterbar{position:sticky;top:0;z-index:30;background:#fff;
  box-shadow:0 12px 16px -15px rgba(28,21,40,.4)}
@media (max-width:768px){.sb-cat-filterbar{top:56px}}  /* clear the mobile topbar */

/* ---------- Richer empty states ---------- */
.sb-empty-rich{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 20px;color:#5d546f}
.sb-empty-rich .ic{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#f4effc,#eaf6fc);
  display:flex;align-items:center;justify-content:center;color:#7c3aed;font-size:24px;border:1px solid #ece7f3}
.sb-empty-rich h4{margin:4px 0 0;font-size:16px;font-weight:800;color:#1c1528}
.sb-empty-rich p{margin:0;font-size:14px;max-width:46ch}
.sb-empty-rich .sb-empty-cta{margin-top:6px;display:inline-block;background:#7c3aed;color:#fff;text-decoration:none;
  font-weight:700;font-size:13.5px;border-radius:10px;padding:9px 18px}
.sb-empty-rich .sb-empty-cta:hover{background:#6d28d9;color:#fff;text-decoration:none}

/* ---------- First-login welcome ---------- */
.sb-welcome{position:fixed;inset:0;z-index:12300;display:none;align-items:center;justify-content:center;
  background:rgba(28,21,40,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sb-welcome.on{display:flex;animation:sbpop .22s ease}
.sb-welcome-card{background:#fff;border-radius:22px;max-width:430px;width:calc(100% - 36px);padding:34px 32px;
  text-align:center;box-shadow:0 30px 84px -24px rgba(28,21,40,.6)}
.sb-welcome-logo{width:74px;height:74px;border-radius:18px;margin-bottom:4px}
.sb-welcome-badge{display:inline-block;background:#f3eff9;color:#6d28d9;font:700 11px/1 "JetBrains Mono",monospace;
  letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:7px 14px;margin:10px 0 12px}
.sb-welcome-card h3{margin:0 0 8px;font-size:23px;font-weight:800;letter-spacing:-.02em;color:#1c1528}
.sb-welcome-card p{margin:0 0 20px;color:#5d546f;font-size:14.5px;line-height:1.55}
.sb-welcome-btn{background:#7c3aed;color:#fff;border:0;border-radius:11px;padding:12px 32px;font-weight:700;font-size:15px;cursor:pointer}
.sb-welcome-btn:hover{background:#6d28d9}

/* ---------- Live price pill on dashboard featured short-course cards ---------- */
.sb-feat-tag-paid{background:#1c1528;color:#fff}

/* ---------- Shared read-only star display (cards, catalogue, course page) ---------- */
.sb-stars{display:inline-flex;gap:1px;color:#f5b301;font-size:13px;vertical-align:middle}
.sb-stars .fa-regular{color:#d9cfe6}
.sb-stars-none{color:#9a90ad;font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.sb-stars-num{margin-left:5px;font-weight:800;font-size:12.5px;color:#4a4060;vertical-align:middle}
.sb-stars-count{margin-left:3px;font-size:12px;color:#9a90ad;vertical-align:middle}
.sb-cat-rating{display:flex;align-items:center;gap:2px;margin:2px 0 10px}

/* ---------- Random course-rating popup ---------- */
.sb-rv{position:fixed;inset:0;z-index:12400;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(28,21,40,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .2s ease}
.sb-rv.on{opacity:1}
.sb-rv-card{position:relative;width:100%;max-width:420px;background:#fff;border-radius:20px;padding:30px 28px 24px;
  text-align:center;box-shadow:0 24px 70px rgba(28,21,40,.45);transform:translateY(12px) scale(.98);transition:transform .22s cubic-bezier(.22,.61,.36,1);
  font-family:Archivo,system-ui,sans-serif}
.sb-rv.on .sb-rv-card{transform:none}
.sb-rv-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:#b4abc6;cursor:pointer;padding:4px 8px}
.sb-rv-x:hover{color:#6d28d9}
.sb-rv-h{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#7c3aed}
.sb-rv-course{margin:8px 0 18px;font-size:21px;font-weight:800;letter-spacing:-.02em;color:#1c1528;line-height:1.25}
.sb-rv-stars{display:flex;justify-content:center;gap:8px;margin-bottom:8px}
.sb-rv-star{background:none;border:0;cursor:pointer;font-size:38px;line-height:1;color:#e4def0;padding:2px;transition:transform .1s ease,color .1s ease}
.sb-rv-star:hover{transform:scale(1.15)}
.sb-rv-star.on{color:#f5b301}
.sb-rv-hint{min-height:18px;font-size:13px;font-weight:700;color:#7c3aed;margin-bottom:14px;letter-spacing:.01em}
.sb-rv-text{width:100%;box-sizing:border-box;border:1.5px solid #e4def0;border-radius:12px;padding:11px 13px;font:400 14px/1.5 Archivo,system-ui,sans-serif;
  color:#2b2140;resize:vertical;margin-bottom:16px;outline:none}
.sb-rv-text:focus{border-color:#7c3aed}
.sb-rv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sb-rv-later{background:none;border:0;color:#8b8299;font-size:13.5px;font-weight:600;cursor:pointer;padding:8px 4px}
.sb-rv-later:hover{color:#4a4060}
.sb-rv-submit{background:#7c3aed;color:#fff;border:0;border-radius:11px;padding:12px 26px;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .15s ease}
.sb-rv-submit:hover:not(:disabled){background:#6d28d9}
.sb-rv-submit:disabled{opacity:.45;cursor:default}
.sb-rv-thanks{padding:14px 4px 8px}
.sb-rv-thanks i{font-size:46px;color:#23b07d}
.sb-rv-thanks h4{margin:14px 0 6px;font-size:22px;font-weight:800;color:#1c1528}
.sb-rv-thanks p{margin:0;color:#5d546f;font-size:14px}
@media (max-width:480px){.sb-rv-star{font-size:33px}.sb-rv-course{font-size:19px}}

@media (prefers-reduced-motion:reduce){#sb-loader *,.sb-fill-anim,.sb-rv,.sb-rv-card{animation:none!important;transition:none!important}}