/**
 * TeachDemy — UI enhancements (Phase 2).
 *
 * Adds the styling for the new header search, scroll-to-top button,
 * reading progress bar, cookie consent banner, footer newsletter,
 * micro-interactions (button ripple, card lift, focus glow), and
 * refined animations across the redesigned site.
 *
 * Loaded on every page that uses the redesigned chrome
 * (header-redesign.php / footer-redesign.php). See functions.php →
 * teachdemy_enqueue_redesign_assets().
 */

/* ============================================================
 * Header search toggle
 * ============================================================ */
.td-page .td-header-search{position:relative;display:flex;align-items:center}
.td-page .td-search-toggle{background:none;border:0;color:var(--navy);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center;width:36px;height:36px;transition:background .2s,color .2s}
.td-page .td-search-toggle:hover{background:var(--mint);color:var(--green)}
.td-page .td-search-form{position:absolute;top:calc(100% + 14px);right:0;display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(7,31,61,.16);padding:0;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:top right;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:120;overflow:hidden}
.td-page .td-search-form.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.td-page .td-search-form input{width:320px;max-width:70vw;border:0;outline:0;padding:14px 16px;font-size:13px;font-weight:600;color:var(--ink);background:transparent}
.td-page .td-search-form button{background:linear-gradient(135deg,var(--green),var(--green2));border:0;color:#fff;padding:0 18px;height:100%;display:grid;place-items:center;cursor:pointer;transition:filter .2s}
.td-page .td-search-form button:hover{filter:brightness(1.08)}
@media(max-width:1050px){
  .td-page .td-search-form{position:fixed;top:76px;left:0;right:0;width:auto;border-radius:0;border-left:0;border-right:0;border-top:0;transform:translateY(-8px)}
  .td-page .td-search-form.is-open{transform:translateY(0)}
  .td-page .td-search-form input{width:100%}
}

/* ============================================================
 * Reading progress bar
 * ============================================================ */
.td-progress-bar{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:9998;pointer-events:none}
.td-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .1s linear;box-shadow:0 0 8px rgba(22,166,115,.5)}

/* ============================================================
 * Scroll-to-top button
 * ============================================================ */
.td-scroll-top{position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px rgba(6,43,43,.28);z-index:9997;opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:opacity .3s,transform .3s,visibility .3s,background .2s}
.td-scroll-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.td-scroll-top:hover{background:linear-gradient(135deg,var(--green),var(--green2));transform:translateY(-3px) scale(1.05)}
.td-scroll-top:active{transform:translateY(-1px) scale(1)}
@media(max-width:600px){.td-scroll-top{bottom:18px;right:18px;width:42px;height:42px}}

/* Reading position indicator (circular, fixed) — mirrors
   .td-scroll-top's fixed positioning + is-visible fade pattern.
   The JS (teachdemy-enhancements.js) already computes the scroll
   percentage and toggles .is-visible correctly; this was the only
   piece missing, which is why it rendered as an unstyled block
   after the footer instead of a small floating circle. */
.td-read-progress{position:fixed;bottom:28px;left:28px;width:46px;height:46px;z-index:9997;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:opacity .3s,transform .3s,visibility .3s;pointer-events:none}
.td-read-progress.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.td-read-progress svg{width:100%;height:100%;transform:rotate(-90deg)}
.td-rp-track{fill:none;stroke:rgba(6,43,43,.10);stroke-width:3}
.td-rp-fill{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.td-rp-label{position:absolute;font-size:9.5px;font-weight:900;color:var(--navy)}
@media(max-width:600px){.td-read-progress{bottom:18px;left:18px;width:38px;height:38px}}

/* ============================================================
 * Cookie consent banner
 * ============================================================ */
.td-cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -14px 40px rgba(7,31,61,.10);z-index:9996;padding:18px 0;animation:tdCookieSlide .4s ease}
@keyframes tdCookieSlide{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.td-cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;max-width:1220px;width:92%;margin:auto}
.td-cookie-text{flex:1;min-width:280px}
.td-cookie-text strong{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.td-cookie-text span{font-size:12px;color:var(--muted);line-height:1.7}
.td-cookie-text a{color:var(--blue);font-weight:700;text-decoration:underline}
.td-cookie-actions{display:flex;gap:8px;flex-shrink:0}
@media(max-width:600px){.td-cookie-inner{flex-direction:column;align-items:stretch}.td-cookie-actions{justify-content:flex-end}}

/* ============================================================
 * Footer newsletter strip
 * ============================================================ */
.td-page .td-foot-newsletter{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:34px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.td-page .td-news-row{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.td-page .td-news-text h3{color:#fff;font-size:22px;margin:0 0 4px;letter-spacing:-.4px}
.td-page .td-news-text p{color:#b9d0ca;font-size:13px;margin:0;max-width:480px}
.td-page .td-news-form{display:flex;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:6px;min-width:320px}
.td-page .td-news-form input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:13px;padding:10px 12px;font-weight:600}
.td-page .td-news-form input::placeholder{color:rgba(255,255,255,.6)}
.td-page .td-news-form .btn{margin:0}
@media(max-width:700px){.td-page .td-news-form{min-width:100%}.td-page .td-news-text{text-align:center}}

/* ============================================================
 * Micro-interactions — button ripple
 * ============================================================ */
.td-page .btn{position:relative;overflow:hidden}
.td-page .btn .td-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:tdRipple .6s ease-out;pointer-events:none}
.td-page .btn.primary .td-ripple,.td-page .btn.dark .td-ripple{background:rgba(255,255,255,.35)}
.td-page .btn.secondary .td-ripple,.td-page .btn.ghost .td-ripple{background:rgba(22,166,115,.18)}
@keyframes tdRipple{to{transform:scale(2.5);opacity:0}}

/* ============================================================
 * Card lift + glow on hover (subtle, refined)
 * ============================================================ */
.td-page .card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.td-page .card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(7,31,61,.10);border-color:rgba(22,166,115,.3)}
.td-page .section .card:hover .icon{transform:scale(1.06) rotate(-2deg);transition:transform .3s ease}
.td-page .icon{transition:transform .3s ease}

/* ============================================================
 * Pill / eyebrow entrance animation
 * ============================================================ */
.td-page .pill,.td-page .eyebrow,.td-page .kicker{animation:tdPillIn .5s ease both}
@keyframes tdPillIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
 * Section title + lead fade-up on scroll (CSS-driven, no JS)
 * Uses the .td-reveal class that can be added manually or by a tiny
 * JS IntersectionObserver. Falls back gracefully if no JS.
 * ============================================================ */
.td-page .td-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.td-page .td-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.td-page .td-reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
 * Form field focus glow (shared)
 * ============================================================ */
.td-page .form-grid input:focus,.td-page .form-grid select:focus,.td-page .form-grid textarea:focus,
.td-page .td-news-form input:focus,.td-page .td-search-form input:focus{box-shadow:0 0 0 3px var(--mint);border-color:var(--green)}

/* ============================================================
 * Accordion smooth height animation (FAQ)
 * ============================================================ */
.td-page .accordion details{transition:background .2s}
.td-page .accordion details[open]{background:rgba(22,166,115,.03);border-radius:12px;padding-left:18px;padding-right:18px}
.td-page .accordion details summary{transition:color .2s}
.td-page .accordion details summary:hover{color:var(--green)}
.td-page .accordion .accordion-body{animation:tdAccordionOpen .3s ease}
@keyframes tdAccordionOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================
 * Tab button active indicator (Courses)
 * ============================================================ */
.td-page .tabs button{position:relative;transition:all .2s}
.td-page .tabs button:hover{border-color:var(--green);color:var(--green)}
.td-page .tabs button.active:after{content:"";position:absolute;left:50%;bottom:-7px;width:6px;height:6px;border-radius:50%;background:var(--green);transform:translateX(-50%)}

/* ============================================================
 * Course card image zoom on hover
 * ============================================================ */
.td-page .course .course-img{transition:transform .4s ease}
.td-page .course:hover .course-img{transform:scale(1.03)}
.td-page .course .course-img-fallback svg{transition:transform .4s ease}
.td-page .course:hover .course-img-fallback svg{transform:scale(1.08) rotate(-3deg)}

/* ============================================================
 * Button hover lift (refined, already partial — enhances it)
 * ============================================================ */
.td-page .btn.primary:hover{box-shadow:0 12px 28px rgba(23,105,232,.32),0 6px 14px rgba(22,166,115,.24)}
.td-page .btn:active{transform:translateY(0)!important}

/* ============================================================
 * Nav link underline animation
 * ============================================================ */
.td-page .navlinks>a{position:relative}
.td-page .navlinks>a:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .25s ease}
.td-page .navlinks>a:hover:after,.td-page .navlinks>a:focus:after{width:100%}

/* ============================================================
 * Footer link hover polish
 * ============================================================ */
.td-page .foot a{transition:color .2s,padding-left .2s}
.td-page .foot a:hover{color:#fff;padding-left:4px}

/* ============================================================
 * Wizard enhanced transitions (mentor support)
 * ============================================================ */
.td-page .pick{position:relative}
.td-page .pick:after{content:"✓";position:absolute;top:10px;right:12px;font-size:14px;font-weight:900;color:var(--green);opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s}
.td-page .pick.selected:after{opacity:1;transform:scale(1)}
.td-page .pick h3{transition:color .2s}
.td-page .pick.selected h3{color:var(--green)}

/* ============================================================
 * Badge pulse for cart count
 * ============================================================ */
.td-page .cart-count{animation:tdCartPulse 2.4s ease-in-out infinite}
@keyframes tdCartPulse{0%,100%{box-shadow:0 0 0 0 rgba(23,105,232,.4)}50%{box-shadow:0 0 0 5px rgba(23,105,232,0)}}

/* ============================================================
 * Sticky bar shadow on scroll (refined)
 * ============================================================ */
.td-page .sticky-bar{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ============================================================
 * Skeleton loading shimmer (used by AJAX patterns later)
 * ============================================================ */
.td-page .td-skeleton{background:linear-gradient(90deg,#f0f4f2 25%,#e6efeb 37%,#f0f4f2 63%);background-size:400% 100%;animation:tdShimmer 1.4s ease infinite}
@keyframes tdShimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ============================================================
 * Mobile menu refinements
 * ============================================================ */
@media(max-width:1050px){
  .td-page .td-header-search{margin-left:auto;margin-right:4px}
}
@media(max-width:650px){
  .td-page .td-header-search{position:static}
  .td-page .td-search-form{position:fixed;top:76px;left:0;right:0;width:auto}
}

/* ============================================================
 * Print-friendly (basics)
 * ============================================================ */
@media print{
  .td-scroll-top,.td-cookie-banner,.td-progress-bar,.td-foot-newsletter,.td-page .top,.td-page .navactions{display:none!important}
  .td-page .header{position:static!important}
}

/* ============================================================
 * Header shrink-on-scroll + hide-on-scroll-down (mobile UX)
 * ============================================================ */
.td-page .header{transition:transform .3s ease,box-shadow .25s ease,min-height .25s ease}
.td-page .header.is-scrolled{box-shadow:0 8px 24px rgba(7,31,61,.08);min-height:64px}
.td-page .header.is-scrolled .nav{min-height:64px}
.td-page .header.is-scrolled .brand-logo{height:42px}
@media(max-width:1050px){
  .td-page .header.is-hidden{transform:translateY(-100%)}
}

/* ============================================================
 * Active nav link indicator
 * ============================================================ */
.td-page .navlinks>a.is-active{color:var(--green)}
.td-page .navlinks>a.is-active:after{width:100%}

/* ============================================================
 * Card entrance stagger (for grids — applied via .td-reveal)
 * ============================================================ */
.td-page .grid .td-reveal:nth-child(1){transition-delay:0s}
.td-page .grid .td-reveal:nth-child(2){transition-delay:.06s}
.td-page .grid .td-reveal:nth-child(3){transition-delay:.12s}
.td-page .grid .td-reveal:nth-child(4){transition-delay:.18s}
.td-page .grid .td-reveal:nth-child(5){transition-delay:.24s}
.td-page .grid .td-reveal:nth-child(6){transition-delay:.3s}
.td-page .grid .td-reveal:nth-child(7){transition-delay:.36s}
.td-page .grid .td-reveal:nth-child(8){transition-delay:.42s}
@media(prefers-reduced-motion:reduce){.td-page .grid .td-reveal{transition-delay:0s}}

/* ============================================================
 * Policy page meta row (last updated + reading time)
 * ============================================================ */
.td-page .td-meta-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.td-page .td-meta-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#bfe1dc;font-weight:600;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.td-page .td-meta-item svg{opacity:.85}

/* ============================================================
 * Section title reveal (when .td-reveal applied)
 * ============================================================ */
.td-page .section-title.td-reveal{transition:opacity .6s ease,transform .6s ease}

/* ============================================================
 * Hero text entrance animation
 * ============================================================ */
.td-page .page-hero .crumb{animation:tdHeroIn .5s ease both}
.td-page .page-hero .eyebrow{animation:tdHeroIn .5s ease .08s both}
.td-page .page-hero h1{animation:tdHeroIn .6s ease .16s both}
.td-page .page-hero p{animation:tdHeroIn .6s ease .24s both}
.td-page .page-hero .page-hero-actions{animation:tdHeroIn .6s ease .32s both}
.td-page .page-hero .td-meta-row{animation:tdHeroIn .6s ease .4s both}
@keyframes tdHeroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.td-page .page-hero *{animation:none!important}}

/* ============================================================
 * "View Profile" button polish on instructor cards
 * ============================================================ */
.td-page .td-inst-card .btn{width:100%;margin-top:14px}

/* ============================================================
 * Filter bar focus enhancement
 * ============================================================ */
.td-page .filterbar input:focus,.td-page .filterbar select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--mint)}

/* ============================================================
 * Social share buttons (instructor / course pages)
 * ============================================================ */
.td-share-row{display:flex;gap:8px;flex-wrap:wrap}
.td-share-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;font-size:12px;font-weight:800;text-decoration:none;border:1.5px solid var(--line);background:#fff;color:#4b6076;cursor:pointer;transition:all .2s}
.td-share-btn svg{flex:none}
.td-share-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(7,31,61,.08)}
.td-share-tw:hover{background:#000;color:#fff;border-color:#000}
.td-share-li:hover{background:#0a66c2;color:#fff;border-color:#0a66c2}
.td-share-fb:hover{background:#1877f2;color:#fff;border-color:#1877f2}
.td-share-wa:hover{background:#25d366;color:#fff;border-color:#25d366}
.td-share-copy:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(max-width:600px){.td-share-btn span{display:none}.td-share-btn{padding:12px;width:44px;justify-content:center}}

/* ============================================================
 * Gradient text utility
 * ============================================================ */
.td-page .td-grad-text{background:linear-gradient(135deg,var(--green),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ============================================================
 * Glassmorphism card variant
 * ============================================================ */
.td-page .card.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);box-shadow:0 8px 32px rgba(7,31,61,.08)}

/* ============================================================
 * Wishlist button (course cards)
 * ============================================================ */
.td-wishlist-btn{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);border:0;display:grid;place-items:center;cursor:pointer;z-index:5;transition:all .2s;backdrop-filter:blur(4px)}
.td-wishlist-btn:hover{background:#fff;transform:scale(1.1)}
.td-wishlist-btn svg{width:18px;height:18px;transition:all .2s}
.td-wishlist-btn.is-active svg{fill:#e74c3c;stroke:#e74c3c}
.td-wishlist-btn.is-active{animation:tdHeartPop .3s ease}
@keyframes tdHeartPop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ============================================================
 * Course comparison bar (fixed bottom)
 * ============================================================ */
.td-compare-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(7,31,61,.08);z-index:9995;padding:14px 0;transform:translateY(100%);transition:transform .3s ease}
.td-compare-bar.is-visible{transform:translateY(0)}
.td-compare-bar .container{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.td-compare-items{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.td-compare-chip{display:inline-flex;align-items:center;gap:8px;background:var(--mint);border:1px solid var(--green);color:var(--navy);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;max-width:240px}
.td-compare-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-compare-chip button{background:none;border:0;color:var(--muted);cursor:pointer;padding:0;font-size:16px;line-height:1}
.td-compare-chip button:hover{color:#e74c3c}
.td-compare-actions{display:flex;gap:8px;flex-shrink:0}
@media(max-width:600px){.td-compare-bar .container{flex-direction:column;align-items:stretch}.td-compare-actions{justify-content:flex-end}}

/* ============================================================
 * Course card: add compare/wishlist buttons + duration badge
 * ============================================================ */
.td-page .course{position:relative}
.td-page .course .course-duration{position:absolute;bottom:10px;left:10px;background:rgba(6,43,43,.85);color:#fff;font-size:10px;font-weight:800;padding:4px 8px;border-radius:6px;z-index:4;backdrop-filter:blur(4px)}

/* ============================================================
 * Responsive table (mobile card view)
 * ============================================================ */
@media(max-width:700px){
  .td-page .table thead{display:none}
  .td-page .table,.td-page .table tbody,.td-page .table tr,.td-page .table td{display:block;width:100%}
  .td-page .table tr{margin-bottom:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .td-page .table td{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px}
  .td-page .table td:last-child{border-bottom:0}
  .td-page .table td:before{content:attr(data-label);font-weight:800;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
  .td-page .table td:empty{display:none}
}

/* ============================================================
 * Empty state styling (no results)
 * ============================================================ */
.td-page .td-empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.td-page .td-empty-state svg{width:56px;height:56px;margin-bottom:16px;opacity:.4}
.td-page .td-empty-state h3{color:var(--ink);margin:0 0 8px;font-size:18px}
.td-page .td-empty-state p{margin:0 0 20px;font-size:13px}

/* ============================================================
 * Badge variants (refined)
 * ============================================================ */
.td-page .badge{position:absolute;top:10px;left:10px;background:var(--green);color:#fff;font-size:9px;font-weight:900;padding:4px 8px;border-radius:6px;z-index:4;letter-spacing:.5px;text-transform:uppercase}
.td-page .course-img .badge{position:absolute}
.td-page .badge.badge-sale{background:#e74c3c}
.td-page .badge.badge-new{background:var(--blue)}
.td-page .badge.badge-hot{background:var(--gold);color:var(--navy)}

/* ============================================================
 * ROUND 5 — Share buttons, author box, related posts, countdown,
 * sticky course CTA, TOC, copy-code, lightbox, YouTube facade,
 * back-to-top progress ring. Brand tokens only; dark-mode aware.
 * ============================================================ */

/* ---- Share row (articles + course pages) ---- */
.td-share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:34px 0 8px;padding:18px 20px;background:var(--mint);border:1px solid var(--line);border-radius:16px}
.td-share__label{font-size:11px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}
.td-share__icons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.td-share__btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;text-decoration:none}
.td-share__btn svg{width:17px;height:17px}
.td-share__btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(7,31,61,.14)}
.td-share__btn--telegram:hover{background:#229ED9;border-color:#229ED9;color:#fff}
.td-share__btn--whatsapp:hover{background:#25D366;border-color:#25D366;color:#fff}
.td-share__btn--x:hover{background:#000;border-color:#000;color:#fff}
.td-share__btn--linkedin:hover{background:#0A66C2;border-color:#0A66C2;color:#fff}
.td-share__btn--facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.td-share__btn--link:hover,.td-share__btn--link.is-copied{background:var(--green);border-color:var(--green);color:#fff}
.td-share-copy{font:inherit}
html[data-theme="dark"] .td-share{background:rgba(39,197,139,.08)}
html[data-theme="dark"] .td-share__btn{background:#0d2e2a;border-color:#1a3030;color:#e8f0ee}

/* ---- Author box ---- */
.td-author-box{display:flex;gap:20px;align-items:flex-start;margin:30px 0;padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.td-author-box__avatar{border-radius:50%!important;border:3px solid var(--mint);width:88px;height:88px;flex-shrink:0}
.td-author-box__eyebrow{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1.6px;color:var(--green);text-transform:uppercase;margin-bottom:4px}
.td-author-box__name{margin:0 0 6px;font-size:20px}
.td-author-box__name a{color:inherit;text-decoration:none}
.td-author-box__name a:hover{color:var(--green)}
.td-author-box__bio{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.7;max-width:640px}
.td-author-box__link{font-size:12px;font-weight:800;color:var(--green);text-decoration:none}
.td-author-box__link:hover{text-decoration:underline}
@media(max-width:600px){.td-author-box{flex-direction:column;gap:14px;padding:20px}}
html[data-theme="dark"] .td-author-box{background:#0a1f1f}

/* ---- Related articles grid ---- */
.td-related{margin:40px 0 10px}
.td-related__title{font-size:22px;margin:0 0 18px}
.td-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.td-related__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .22s,box-shadow .22s}
.td-related__card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(7,31,61,.12)}
.td-related__thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--mint)}
.td-related__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.td-related__card:hover .td-related__img{transform:scale(1.05)}
.td-related__img--fallback{display:grid;place-items:center;color:var(--green)}
.td-related__img--fallback svg{width:34px;height:34px}
.td-related__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.td-related__cat{font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--green)}
.td-related__body h3{margin:0;font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.td-related__body time{font-size:11.5px;color:var(--muted);font-weight:600}
@media(max-width:860px){.td-related__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.td-related__grid{grid-template-columns:1fr}}
html[data-theme="dark"] .td-related__card{background:#0a1f1f}

/* ---- Upcoming course countdown ---- */
.td-countdown-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:14px 18px;background:linear-gradient(135deg,var(--mint),rgba(39,197,139,.06));border:1px solid var(--line);border-radius:14px}
.td-countdown-wrap__label{font-size:11px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}
.td-countdown{display:flex;gap:8px;flex-wrap:wrap}
.td-countdown__cell{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:8px 6px 6px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 12px rgba(7,31,61,.06)}
.td-countdown__cell b{font-size:20px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1}
.td-countdown__cell i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.td-countdown__done{display:inline-block;padding:6px 14px;background:var(--green);color:#fff;font-size:11px;font-weight:900;letter-spacing:1px;border-radius:999px;text-transform:uppercase;animation:tdHeartPop .4s ease}
.td-countdown--card{margin-top:10px}
.td-countdown--card .td-countdown__cell{min-width:44px;padding:6px 4px 5px}
.td-countdown--card .td-countdown__cell b{font-size:15px}
html[data-theme="dark"] .td-countdown__cell{background:#0d2e2a;border-color:#1a3030}
html[data-theme="dark"] .td-countdown__cell b{color:#e8f0ee}

/* ---- Mobile sticky enroll bar (single course) ---- */
.td-sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:9996;background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 34px rgba(7,31,61,.14);padding-bottom:env(safe-area-inset-bottom);display:none}
.td-sticky-cta__inner{display:flex;align-items:center;gap:12px;padding:10px 14px}
.td-sticky-cta__thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--mint)}
.td-sticky-cta__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.td-sticky-cta__meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.td-sticky-cta__name{font-size:12.5px;font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-sticky-cta__price{font-size:13px;font-weight:900;color:var(--green)}
.td-sticky-cta__price del{color:var(--muted);font-weight:600;font-size:11px;margin-right:6px}
.td-sticky-cta__price ins{text-decoration:none}
.td-sticky-cta__btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;font-size:13px;font-weight:800;text-decoration:none;letter-spacing:.3px;box-shadow:0 8px 20px rgba(22,166,115,.35)}
.td-sticky-cta__btn:active{transform:scale(.97)}
@media(max-width:767px){
  body.single-product .td-sticky-cta{display:block}
  body.single-product{padding-bottom:72px}
}
html[data-theme="dark"] .td-sticky-cta{background:#0a1f1f;border-color:#1a3030}
html[data-theme="dark"] .td-sticky-cta__name{color:#e8f0ee}

/* ---- Article table of contents ---- */
.td-toc{margin:0 0 28px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.td-toc__head{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--mint);border:0;padding:13px 18px;cursor:pointer;font:inherit}
.td-toc__title{font-size:11.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}
.td-toc__chev{color:var(--green);transition:transform .25s}
.td-toc.is-collapsed .td-toc__chev{transform:rotate(-90deg)}
.td-toc__list{margin:0;padding:10px 18px 14px;list-style:none;counter-reset:tdtoc}
.td-toc__item{margin:0}
.td-toc__item a{position:relative;display:block;padding:7px 0 7px 26px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px dashed var(--line);transition:color .15s,padding-left .15s}
.td-toc__item:last-child a{border-bottom:0}
.td-toc__item a::before{counter-increment:tdtoc;content:counter(tdtoc,decimal-leading-zero);position:absolute;left:0;top:9px;font-size:10px;font-weight:900;color:var(--green)}
.td-toc__item a:hover{color:var(--green);padding-left:29px}
.td-toc__item--sub a{padding-left:42px;font-size:13.5px;color:var(--muted)}
.td-toc__item--sub a::before{left:20px;top:9px;color:var(--muted);opacity:.7}
.td-toc.is-collapsed .td-toc__list{display:none}
html[data-theme="dark"] .td-toc{background:#0a1f1f}
html[data-theme="dark"] .td-toc__head{background:rgba(39,197,139,.1)}
html[data-theme="dark"] .td-toc__title{color:#e8f0ee}
html[data-theme="dark"] .td-toc__item a{color:#c9d8d5;border-color:#1a3030}

/* ---- Copy-code button on <pre> ---- */
pre{position:relative}
.td-copy-code{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.94);color:var(--navy);font-size:11px;font-weight:800;cursor:pointer;opacity:0;transition:opacity .2s,background .2s,color .2s,border-color .2s;backdrop-filter:blur(4px);z-index:3}
pre:hover .td-copy-code,.td-copy-code:focus-visible,.td-copy-code.is-copied{opacity:1}
.td-copy-code:hover,.td-copy-code.is-copied{background:var(--green);border-color:var(--green);color:#fff}
html[data-theme="dark"] .td-copy-code{background:rgba(13,46,42,.94);border-color:#1a3030;color:#e8f0ee}

/* ---- Image lightbox ---- */
.td-zoomable{cursor:zoom-in}
.td-lightbox{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(4,20,22,.92);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;backdrop-filter:blur(6px)}
.td-lightbox.is-open{opacity:1;visibility:visible}
.td-lightbox__fig{margin:0;max-width:min(1100px,92vw);max-height:86vh;animation:tdLbIn .28s ease}
.td-lightbox__fig img{display:block;max-width:100%;max-height:86vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
@keyframes tdLbIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.td-lightbox__close{position:fixed;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.td-lightbox__close:hover{background:var(--green);transform:rotate(90deg)}

/* ---- YouTube click-to-load facade ---- */
.td-yt-facade{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:pointer;background:#000;max-width:100%}
.td-yt-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .25s,transform .35s}
.td-yt-facade:hover img{opacity:1;transform:scale(1.03)}
.td-yt-facade__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 12px 34px rgba(22,166,115,.5);transition:transform .22s,background .22s}
.td-yt-facade__play svg{width:26px;height:26px;margin-left:3px}
.td-yt-facade:hover .td-yt-facade__play{transform:translate(-50%,-50%) scale(1.12);background:var(--green2)}
.td-yt-facade__title{position:absolute;left:12px;right:12px;bottom:10px;color:#fff;font-size:12.5px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Back-to-top scroll progress ring ---- */
.td-scroll-top{overflow:hidden}
.td-top-ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);pointer-events:none}
.td-top-ring__track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2.5}
.td-top-ring__fill{fill:none;stroke:var(--green2);stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .15s linear}
.td-scroll-top>svg:first-child{position:relative;z-index:1}

/* ---- Course page share spacing (WooCommerce summary) ---- */
.td-course-share{margin:16px 0 4px}
.td-course-share .td-share{margin:0}

/* ---- TOC scroll-spy active item (ROUND 6) ---- */
.td-toc__item a.is-active{color:var(--green);padding-left:29px}
.td-toc__item a.is-active::before{transform:scale(1.25);transition:transform .2s}
.td-toc__item--sub a.is-active{color:var(--green)}
html[data-theme="dark"] .td-toc__item a.is-active{color:var(--green2)}

/* ---- Print: hide the new interactive chrome ---- */
@media print{
  .td-share,.td-sticky-cta,.td-toc,.td-copy-code,.td-yt-facade__play,.td-top-ring{display:none!important}
}

/* =====================================================================
   ROUND 7 — §25 Sticky mobile enroll bar (single course pages).
   Injected by teachdemy-enhancements.js §25. Mobile only (≤768px).
   ===================================================================== */
@media (max-width:768px){
	.td-enroll-bar{
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		z-index:950;
		display:flex;
		align-items:center;
		gap:14px;
		padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
		background:rgba(6,43,43,.97);
		backdrop-filter:blur(8px);
		-webkit-backdrop-filter:blur(8px);
		border-top:2px solid #16a673;
		box-shadow:0 -8px 24px rgba(6,43,43,.28);
		transform:translateY(110%);
		transition:transform .28s cubic-bezier(.22,.9,.36,1),visibility .28s;
		visibility:hidden;
	}
	.td-enroll-bar.is-shown{
		transform:translateY(0);
		visibility:visible;
	}
	.td-enroll-bar__price{
		color:#fff;
		font-size:17px;
		font-weight:900;
		letter-spacing:-.01em;
	}
	.td-enroll-bar__price .woocommerce-Price-currencySymbol{
		font-size:12px;
		font-weight:700;
		opacity:.8;
		margin-right:2px;
	}
	.td-enroll-bar__price del{
		opacity:.5;
		font-size:13px;
		margin-right:6px;
	}
	.td-enroll-bar__price ins{
		text-decoration:none;
	}
	.td-enroll-bar__btn{
		margin-left:auto;
		appearance:none;
		border:0;
		background:linear-gradient(135deg,#16a673,#27c58b);
		color:#fff;
		font:900 14px/1 Inter,system-ui,sans-serif;
		padding:14px 26px;
		border-radius:12px;
		cursor:pointer;
		box-shadow:0 8px 18px rgba(22,166,115,.35);
	}
	.td-enroll-bar__btn:active{
		transform:scale(.97);
	}
	/* Pulse animation applied to the real add-to-cart button after
	   the bar scrolls the learner back to the buy box. */
	.td-pulse-cta{
		animation:tdPulseCta 1s ease 2;
	}
	@keyframes tdPulseCta{
		0%,100%{box-shadow:0 0 0 0 rgba(22,166,115,.45)}
		50%{box-shadow:0 0 0 12px rgba(22,166,115,0)}
	}
}
/* Dark mode: bar is already navy — identical in both themes. */

/* ==========================================================================
   ROUND 8 — §26 Recently-viewed courses strip (Courses page + shop archive).
   Data source: teachdemy-enhancements.js §26 (localStorage, max 8 items).
   ========================================================================== */
.td-recent{
	margin:26px 0 6px;
}
.td-recent__head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:12px;
}
.td-recent__title{
	font:800 15px/1.2 Inter,system-ui,sans-serif;
	color:var(--td-navy,#062b2b);
	margin:0;
	letter-spacing:-.01em;
}
.td-recent__clear{
	appearance:none;
	border:0;
	background:none;
	font:600 12px/1 Inter,system-ui,sans-serif;
	color:var(--td-muted,#6b7b90);
	cursor:pointer;
	padding:5px 10px;
	border-radius:8px;
	transition:background .18s,color .18s;
}
.td-recent__clear:hover,
.td-recent__clear:focus-visible{
	background:#e9fbf4;
	color:#0d7a57;
	outline:none;
}
.td-recent__row{
	display:flex;
	gap:14px;
	overflow-x:auto;
	padding:2px 2px 8px;
	scroll-snap-type:x proximity;
	-webkit-overflow-scrolling:touch;
}
.td-recent__row::-webkit-scrollbar{
	height:6px;
}
.td-recent__row::-webkit-scrollbar-thumb{
	background:#cfe6dc;
	border-radius:999px;
}
.td-recent__row::-webkit-scrollbar-track{
	background:transparent;
}
.td-recent__card{
	flex:0 0 216px;
	scroll-snap-align:start;
	display:block;
	background:#fff;
	border:1px solid var(--td-line,#dcebe6);
	border-radius:14px;
	overflow:hidden;
	text-decoration:none;
	transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.td-recent__card:hover,
.td-recent__card:focus-visible{
	transform:translateY(-3px);
	border-color:#16a673;
	box-shadow:0 12px 26px rgba(6,43,43,.10);
	outline:none;
}
.td-recent__img{
	display:block;
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	background:#e9fbf4;
}
.td-recent__img--empty{
	background:linear-gradient(135deg,#e9fbf4 0%,#d3f0e2 100%);
}
.td-recent__body{
	display:block;
	padding:12px 14px 14px;
}
.td-recent__name{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	min-height:2.7em;
	font:700 13.5px/1.35 Inter,system-ui,sans-serif;
	color:var(--td-navy,#062b2b);
}
.td-recent__price{
	display:block;
	margin-top:6px;
	font:800 13px/1 Inter,system-ui,sans-serif;
	color:#0d7a57;
}
@media (prefers-reduced-motion:reduce){
	.td-recent__card{
		transition:none;
	}
	.td-recent__card:hover{
		transform:none;
	}
}
html[data-theme="dark"] .td-recent__card{
	background:#0b1f1e;
	border-color:#1d3a35;
}
html[data-theme="dark"] .td-recent__name{
	color:#e9fbf4;
}
html[data-theme="dark"] .td-recent__img{
	background:#122a27;
}
html[data-theme="dark"] .td-recent__row::-webkit-scrollbar-thumb{
	background:#1d3a35;
}
@media print{
	.td-recent{
		display:none;
	}
}

/* -------------------------------------------------------------------
 * 34. Unified, timed notifications (client item 34): re-skin
 * WooCommerce's stock success/error/info banners so they match the
 * site's $.toast() popups instead of WooCommerce's plain default look
 * — same rounded corners, colored left border, close button. The
 * auto-dismiss timer + close button itself is wired in
 * teachdemy-enhancements.js (unifyWcNotices).
 * ------------------------------------------------------------------- */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-notice{
	position:relative;
	border-radius:14px !important;
	border:1px solid #d6e5e0 !important;
	border-inline-start:4px solid #16a673 !important;
	background:#f4fbf8 !important;
	color:#06272f !important;
	padding:14px 42px 14px 18px !important;
	box-shadow:0 8px 24px -14px rgba(6,43,43,.25);
	font-size:14px;
}
.woocommerce-error{
	border-inline-start-color:#e05252 !important;
	background:#fdf3f3 !important;
}
.woocommerce-info{
	border-inline-start-color:#3a8bd8 !important;
	background:#f2f8fd !important;
}
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{
	display:none !important; /* drop WooCommerce's default dashicon glyph — the colored border already signals type */
}
.tdp-notice-close{
	position:absolute;
	top:8px;
	inset-inline-end:10px;
	width:24px;
	height:24px;
	border:none;
	background:transparent;
	color:inherit;
	opacity:.55;
	font-size:18px;
	line-height:1;
	cursor:pointer;
	border-radius:50%;
}
.tdp-notice-close:hover{opacity:1;background:rgba(0,0,0,.06);}
html[data-theme="dark"] .woocommerce-message, html[data-theme="dark"] .woocommerce-error, html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-notice{
	background:#0f332c !important;
	border-color:#1c5544 !important;
	color:#e9fbf4 !important;
}
html[data-theme="dark"] .woocommerce-error{
	background:#3a1414 !important;
	border-color:#5c2323 !important;
}
html[data-theme="dark"] .woocommerce-info{
	background:#10263a !important;
	border-color:#1f4463 !important;
}