/* HDL Group — Site Updates v1 (static, no Worker dependency) */

/* 1. Skeleton shimmer loaders */
.hdl-skel-grid{display:contents}
.hdl-skel-card{background:var(--white);border:1px solid var(--border);border-radius:6px;overflow:hidden;height:300px;position:relative}
.hdl-skel-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.07) 50%,rgba(0,0,0,0.03) 100%);background-size:200% 100%;animation:hdlShimmer 1.4s ease-in-out infinite}
body.dark-mode .hdl-skel-card{background:#161b25;border-color:#252e3f}
body.dark-mode .hdl-skel-shimmer{background:linear-gradient(90deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.03) 100%);background-size:200% 100%}
@keyframes hdlShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.irp-badge.irp-loading{position:relative;overflow:hidden}

/* 2. Star ratings on book cards */
.hdl-rating{display:flex;align-items:center;gap:5px;margin:-4px 0 12px}
.hdl-rating svg{width:12px;height:12px;fill:var(--gold)}
.hdl-rating span{font-family:'Jost',sans-serif;font-size:0.7rem;color:var(--muted)}

/* 3. New Release badge (distinct from Premium gold badge; sits opposite corner) */
.book-new-badge{position:absolute;top:12px;right:12px;z-index:5;background:var(--green,#2E5D4B);color:#fff;font-family:'Jost',sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:5px 10px;border-radius:20px;border:1px solid rgba(255,255,255,0.25)}

/* 4. Empty-state icons */
.trending-error::before{content:'📡';display:block;font-size:1.8rem;margin-bottom:10px;opacity:0.5}
.no-results::before,.search-modal-empty::before{content:'🔍';display:block;font-size:1.8rem;margin-bottom:10px;opacity:0.5}

/* 5. Sticky-buy cover thumbnail */
#sticky-buy{gap:14px}
#sticky-buy-thumb{width:34px;height:44px;object-fit:contain;border-radius:2px;background:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
#sticky-buy>div:first-child{display:flex;align-items:center;gap:12px}

/* 6. Circular progress ring on back-to-top (replaces top progress bar) */
#reading-progress{display:none!important}
#back-to-top{overflow:visible}
#back-to-top-ring{position:absolute;inset:-4px;pointer-events:none;transform:rotate(-90deg)}
#back-to-top-ring circle{fill:none;stroke:rgba(255,255,255,0.25);stroke-width:2.5}
#back-to-top-ring circle.hdl-ring-fill{stroke:var(--gold);transition:stroke-dashoffset 0.1s linear}

/* 8. Quiz result share card */
.quiz-share-wrap{margin-top:16px}
.quiz-share-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Jost',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:10px 20px;background:transparent;border:1.5px solid var(--navy);color:var(--navy);border-radius:4px;cursor:pointer;transition:all 0.2s}
.quiz-share-btn:hover{background:var(--navy);color:#fff}
#quiz-share-canvas{display:none}

/* 9. Interactive currency pills */
.irp-currencies span{cursor:pointer;transition:all 0.15s;user-select:none}
.irp-currencies span:hover{border-color:var(--gold-border);color:var(--gold)}
.irp-currencies span.irp-pill-active{background:var(--gold);color:#fff;border-color:var(--gold)}

/* Recently viewed strip */
.hdl-recent-strip{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 24px}
.hdl-recent-inner{max-width:1160px;margin:0 auto}
.hdl-recent-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px;margin-top:18px}
.hdl-recent-item{flex:0 0 auto;width:120px;text-decoration:none;cursor:pointer}
.hdl-recent-item img{width:100%;height:150px;object-fit:cover;object-position:top center;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,0.16)}
.hdl-recent-item .hdl-recent-name{display:block;margin-top:6px;font-family:'Jost',sans-serif;font-size:0.7rem;color:var(--navy);line-height:1.3}
body.dark-mode .hdl-recent-strip{background:#161b25;border-color:#252e3f}

/* Continue-reading toast */
#hdl-continue-toast{position:fixed;bottom:24px;left:24px;max-width:320px;background:var(--navy-deep);color:#fff;border-radius:8px;padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,0.3);z-index:9600;display:flex;gap:12px;align-items:center;transform:translateY(20px);opacity:0;transition:all 0.35s;pointer-events:none}
#hdl-continue-toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
#hdl-continue-toast img{width:28px;height:36px;object-fit:contain;border-radius:2px;flex-shrink:0;background:#fff}
#hdl-continue-toast .hdl-ct-text{font-family:'Jost',sans-serif;font-size:0.78rem;line-height:1.4;flex:1}
#hdl-continue-toast .hdl-ct-text strong{color:var(--gold)}
#hdl-continue-toast a{color:var(--gold);text-decoration:none;font-weight:600}
#hdl-continue-toast button{background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.9rem;flex-shrink:0}
@media(max-width:600px){#hdl-continue-toast{left:12px;right:12px;max-width:none;bottom:12px}}

/* Spec comparison link */
.hdl-spec-compare{display:inline-block;margin-top:-8px;margin-bottom:16px;font-family:'Jost',sans-serif;font-size:0.72rem;color:var(--gold);text-decoration:underline;cursor:pointer}

/* Back-to-English breadcrumb */
#hdl-translate-bar{position:fixed;top:64px;left:0;right:0;z-index:997;background:var(--navy-deep);color:#fff;text-align:center;padding:9px 16px;font-family:'Jost',sans-serif;font-size:0.78rem;display:none;align-items:center;justify-content:center;gap:10px}
#hdl-translate-bar.show{display:flex}
#hdl-translate-bar button{background:var(--gold);border:none;color:#fff;font-weight:600;padding:5px 14px;border-radius:3px;cursor:pointer;font-family:'Jost',sans-serif;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em}

/* Focus-visible affordance inside modals we now trap */
.hdl-modal-trapped :focus-visible{outline:2px solid var(--gold);outline-offset:2px}