/* ══════════════════════════════════════════
   MEOWDOOR — Additions v3
   ══════════════════════════════════════════ */

/* ── Image zoom ── */
.post-card__img{overflow:hidden}
.post-card__img img{transition:transform 500ms cubic-bezier(.4,0,.2,1)!important;will-change:transform;display:block;width:100%;height:100%;object-fit:cover}
.post-card:hover .post-card__img img{transform:scale(1.07)!important}
.hero-post__img{overflow:hidden}
.hero-post__img img{transition:transform 600ms cubic-bezier(.4,0,.2,1)!important;width:100%;height:100%;object-fit:cover}
.hero-post:hover .hero-post__img img{transform:scale(1.04)!important}
.post-featured-image{border-radius:var(--r-xl);overflow:hidden;margin-bottom:2rem}
.post-featured-image img{width:100%;display:block;transition:transform 800ms ease}
.post-featured-image:hover img{transform:scale(1.025)}
.mini-post__thumb img{transition:transform 400ms ease}
.mini-post:hover .mini-post__thumb img{transform:scale(1.08)}

/* ② Footer bottom same-line fix */
.footer-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap;gap:.5rem;padding:1.25rem 0!important}
.footer-bottom p,.footer-bottom>*{margin:0!important;line-height:1.5}
.footer-bottom__links{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-bottom__links span,.footer-bottom__links a{font-size:.78rem;color:rgba(255,255,255,.45)}
.footer-bottom__links a:hover{color:rgba(255,255,255,.75)}
@media(max-width:560px){.footer-bottom{flex-direction:column;text-align:center}}

/* ③ Cookie floating icon — bottom left */
.cookie-fab{position:fixed;bottom:1.5rem;left:1.5rem;z-index:9990;width:42px;height:42px;background:var(--ccard);border:1.5px solid var(--cbrl);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-md);transition:all var(--tf);font-size:1.1rem}
.cookie-fab:hover{transform:scale(1.1);border-color:var(--cp)}
.cookie-fab[aria-label]:hover::after{content:attr(aria-label);position:absolute;left:calc(100% + .5rem);white-space:nowrap;background:var(--cd);color:var(--cbg);font-size:.72rem;padding:.25rem .625rem;border-radius:var(--r-md);pointer-events:none}
@media(max-width:480px){.cookie-fab{bottom:5rem;left:1rem;width:36px;height:36px;font-size:.9rem}}

/* Cookie preferences modal */
.cookie-prefs-overlay{position:fixed;inset:0;z-index:9996;background:rgba(10,31,30,.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;visibility:hidden;transition:all var(--tb)}
.cookie-prefs-overlay.show{opacity:1;visibility:visible}
.cookie-prefs-modal{background:var(--ccard);border-radius:var(--r-2xl);max-width:520px;width:100%;padding:2rem;box-shadow:var(--sh-lg);transform:scale(.96);transition:transform var(--ts)}
.cookie-prefs-overlay.show .cookie-prefs-modal{transform:scale(1)}
.cookie-prefs-modal__title{font-size:1.15rem;font-weight:700;color:var(--cd);margin-bottom:.5rem}
.cookie-prefs-modal__desc{font-size:.84rem;color:var(--cm);margin-bottom:1.5rem;line-height:1.6}
.cookie-pref-item{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--cbrl)}
.cookie-pref-item:last-of-type{border-bottom:none}
.cookie-pref-item__name{font-size:.875rem;font-weight:600;color:var(--cd);margin-bottom:.25rem}
.cookie-pref-item__desc{font-size:.78rem;color:var(--cm);line-height:1.5}
.cookie-toggle{position:relative;width:44px;height:24px;flex-shrink:0;display:inline-block}
.cookie-toggle input{opacity:0;width:0;height:0;position:absolute}
.cookie-toggle__track{position:absolute;inset:0;background:var(--cbr);border-radius:var(--r-full);cursor:pointer;transition:background var(--tb)}
.cookie-toggle input:checked+.cookie-toggle__track{background:var(--cp)}
.cookie-toggle__track::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--tb);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.cookie-toggle input:checked+.cookie-toggle__track::before{transform:translateX(20px)}
.cookie-toggle input:disabled+.cookie-toggle__track{opacity:.5;cursor:not-allowed}
.cookie-prefs-actions{display:flex;gap:.625rem;margin-top:1.5rem;flex-wrap:wrap}
.cookie-prefs-actions .btn{flex:1;justify-content:center;min-width:100px}

/* ④ Newsletter sidebar widget */
.widget--newsletter-mini{background:linear-gradient(135deg,var(--cp),var(--cp-h))!important;border-color:transparent!important;color:#fff}
.widget--newsletter-mini .widget__title{color:rgba(255,255,255,.75)!important}
.widget--newsletter-mini p{color:rgba(255,255,255,.7)!important}
.newsletter-form--mini input{background:rgba(255,255,255,.15)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;border-radius:var(--r-md)!important;padding:.75rem 1rem!important;width:100%!important;outline:none!important;font-size:.875rem}
.newsletter-form--mini input::placeholder{color:rgba(255,255,255,.5)!important}
.newsletter-form--mini input:focus{border-color:rgba(255,255,255,.5)!important}
.newsletter-form--mini .btn{background:#fff!important;color:var(--cp)!important;border:none!important;width:100%!important;justify-content:center!important;margin-top:.5rem!important;border-radius:var(--r-full)!important;font-weight:700!important}

/* ⑤ Comment scroll on count click */
.post-hero__icon-item a,.comments-link-anchor{scroll-behavior:smooth}

/* ⑥ TOC collapse */
.toc-box{border:1px solid var(--cbrl);border-radius:var(--r-xl);padding:1.25rem;margin-bottom:2rem;background:var(--cbga)}
.toc-box__title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.875rem;font-weight:700;color:var(--cd);cursor:pointer;user-select:none;margin-bottom:.875rem}
.toc-box__title svg{flex-shrink:0}
.toc-toggle-arrow{width:20px;height:20px;border:1.5px solid var(--cbrl);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;transition:transform var(--tf);flex-shrink:0}
.toc-box.collapsed .toc-toggle-arrow{transform:rotate(-90deg)}
.toc-box.collapsed .toc-list{display:none}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{font-size:.82rem;color:var(--cb);text-decoration:none;padding:.3rem .5rem;border-radius:var(--r-md);transition:all var(--tf);display:block;border-left:2px solid transparent}
.toc-list a:hover,.toc-list a.active{color:var(--cp);background:var(--cp-bg);border-left-color:var(--cp)}
.toc-list a[data-level="3"]{padding-left:1.25rem;font-size:.78rem}

/* ⑦ Post hero — redesigned banner v9 */
.post-hero{
  padding:3.5rem 0 5rem;
  background:linear-gradient(145deg,#0f2927 0%,#1b4f48 50%,#0d3530 100%) !important;
  position:relative;
  overflow:hidden;
  border-bottom:none;
}
[data-theme="dark"] .post-hero,
.dark-mode .post-hero,
body.dark .post-hero{
  background:linear-gradient(145deg,#071a19 0%,#0f3330 50%,#061615 100%) !important;
}
.post-hero__inner{max-width:800px;margin:0 auto;text-align:left !important;position:relative;z-index:3}
.post-hero__cat{margin-bottom:1rem}
.post-hero__cat .badge,.post-hero__cat .badge--p{
  background:rgba(42,157,143,.35) !important;
  border:1px solid rgba(61,191,176,.4) !important;
  color:#fff !important;
  backdrop-filter:blur(6px);
}
.post-hero__title{
  font-size:clamp(1.65rem,4.5vw,3rem) !important;
  line-height:1.18 !important;
  margin-bottom:1.5rem !important;
  color:#fff !important;
  font-weight:800;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
  text-align:left !important;
}
.post-hero__meta{
  display:flex !important;
  align-items:center;
  gap:.875rem;
  flex-wrap:wrap;
  font-size:.82rem;
  color:rgba(255,255,255,.75) !important;
  justify-content:flex-start !important;
  padding:.875rem 1.25rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  backdrop-filter:blur(8px);
}
.post-hero__author{display:flex;align-items:center;gap:.5rem}
.post-hero__author-name{font-size:.88rem;font-weight:700;color:#fff !important}
.post-hero__author:hover .post-hero__author-name{color:rgba(61,191,176,1) !important}
.post-hero__av{border-radius:50% !important;object-fit:cover;border:2px solid rgba(255,255,255,.3) !important}
.post-hero__icon-item{display:flex;align-items:center;gap:.3rem;color:rgba(255,255,255,.7)}
.post-hero__icon-item svg{color:rgba(61,191,176,.85)}
.post-hero__sep,.post-hero__stat-dot{color:rgba(255,255,255,.25) !important}
.post-hero__divider{background:rgba(255,255,255,.2) !important}
.post-hero__stat{color:rgba(255,255,255,.75) !important}
.post-hero__stat svg{color:rgba(61,191,176,.85) !important}
.post-hero__stat-link{color:rgba(255,255,255,.75) !important}
.post-hero__stat-link:hover{color:#fff !important}

/* ⑧ Social share extended */
.post-share{display:flex;align-items:center;gap:.5rem;padding:1.25rem 0;border-top:1px solid var(--cbrl);border-bottom:1px solid var(--cbrl);margin:1.5rem 0;flex-wrap:wrap}
.post-share__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cm);margin-right:.25rem}
.share-btn{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:transform var(--tf),opacity var(--tf);border:none;cursor:pointer;flex-shrink:0}
.share-btn:hover{transform:translateY(-2px);opacity:.85;color:#fff}
.share-btn--fb{background:#1877F2}
.share-btn--tw{background:#000}
.share-btn--li{background:#0A66C2}
.share-btn--wa{background:#25D366}
.share-btn--pi{background:#E60023}
.share-btn--tg{background:#26A5E4}
.share-btn--rd{background:#FF4500}
.share-btn--em{background:#6b7280}
.share-btn--cp{background:var(--cbga);color:var(--cd)!important;border:1.5px solid var(--cbrl)}
.share-btn--cp:hover{background:var(--cp);color:#fff!important;border-color:var(--cp)}
.share-btn--cp.copied{background:#22c55e;color:#fff!important;border-color:#22c55e}

/* ⑫ Save post button on single */
.save-post-wrap{margin:1rem 0}
.save-post-btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.save-post-btn svg{transition:fill var(--tf)}
.save-post-btn.saved svg{fill:var(--cp);stroke:var(--cp)}
.save-post-btn.saved{color:var(--cp);border-color:var(--cp)}

/* ── Mobile popup fix ── */
@media(max-width:480px){
  .popup-modal{max-width:100%!important;border-radius:var(--r-xl)!important;margin:.5rem}
  .popup-modal__body{padding:1.5rem 1.25rem!important}
  .popup-modal__title{font-size:1.1rem!important}
  .popup-modal__form{flex-direction:column!important}
  .popup-modal__form input,.popup-modal__form button{width:100%!important}
}

/* ── Social net widget ── */
.social-net-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.social-net-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:var(--r-md);border:1px solid var(--cbrl);text-decoration:none;font-size:.77rem;font-weight:600;color:var(--cb);transition:all var(--tf);background:var(--cbga)}
.social-net-item:hover{background:var(--sn-color,var(--cp));color:#fff;border-color:transparent}
.social-net-icon{width:26px;height:26px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── Tabs widget ── */
.tabs-widget__nav{display:flex;border-bottom:2px solid var(--cbrl);margin-bottom:1rem}
.tabs-widget__btn{flex:1;padding:.45rem .25rem;font-size:.73rem;font-weight:700;color:var(--cm);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all var(--tf)}
.tabs-widget__btn:hover,.tabs-widget__btn.active{color:var(--cp)}
.tabs-widget__btn.active{border-bottom-color:var(--cp)}
.tabs-widget__pane{display:none}
.tabs-widget__pane.active{display:block}
.mini-post{display:flex;gap:.625rem;padding:.5rem 0;border-bottom:1px solid var(--cbrl);text-decoration:none}
.mini-post:last-child{border-bottom:none}
.mini-post:hover .mini-post__title{color:var(--cp)}
.mini-post__thumb{width:60px;height:48px;border-radius:var(--r-md);overflow:hidden;flex-shrink:0;background:var(--cbga)}
.mini-post__title{font-size:.8rem;font-weight:600;color:var(--cd);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin-bottom:.2rem}
.mini-post__date{font-size:.68rem;color:var(--cm)}

/* ── Cat widget ── */
.cat-widget-list{display:flex;flex-direction:column;gap:2px}
.cat-widget-item{display:flex;align-items:center;justify-content:space-between;padding:.45rem .5rem;border-radius:var(--r-md);transition:background var(--tf)}
.cat-widget-item:hover{background:var(--cp-bg)}
.cat-widget-item a{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--cb);text-decoration:none;flex:1}
.cat-widget-item a:hover{color:var(--cp)}
.cat-widget-dot{width:7px;height:7px;border-radius:50%;background:var(--cp);flex-shrink:0}
.cat-widget-count{font-size:.7rem;font-weight:700;color:var(--cm);background:var(--cbga);padding:1px 6px;border-radius:var(--r-full)}

/* ── Tag cloud ── */
.tag-cloud-wrap a,.tag-cloud-wrap .tag-cloud-link{display:inline-flex!important;padding:3px .75rem!important;background:var(--cbga)!important;color:var(--cb)!important;font-size:.75rem!important;font-weight:500!important;border-radius:var(--r-full)!important;border:1px solid var(--cbrl)!important;text-decoration:none!important;transition:all var(--tf)!important;margin:.2rem .1rem!important}
.tag-cloud-wrap a:hover{background:var(--cp)!important;color:#fff!important;border-color:var(--cp)!important}

/* ── Related posts ── */
.related-posts-section{padding:3rem 0;background:var(--cbga);border-top:1px solid var(--cbrl)}
.related-posts__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.related-posts__title{font-size:1.25rem;color:var(--cd)}

/* ── Reply form ── */
.reply-form{display:none;margin-top:.875rem;background:var(--cbga);border-radius:var(--r-lg);padding:1rem;border:1px solid var(--cbrl)}
.reply-form.open{display:block;animation:mdFade .2s ease}
@keyframes mdFade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.reply-form textarea{width:100%;border:1.5px solid var(--cbrl);border-radius:var(--r-md);padding:.75rem;background:var(--ccard);color:var(--cd);resize:vertical;min-height:80px;outline:none;font-size:.875rem;font-family:var(--fb);box-sizing:border-box;transition:border-color var(--tf)}
.reply-form textarea:focus{border-color:var(--cp)}
.reply-form__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.625rem}

/* ── Comment form ── */
.comment-form-box{background:var(--ccard);border:1px solid var(--cbrl);border-radius:var(--r-xl);padding:1.75rem 2rem;margin-top:2rem}
@media(max-width:560px){.comment-form-box{padding:1.25rem}}
.comment-form-title{display:flex;align-items:center;gap:.625rem;font-size:1.1rem;margin-bottom:1.5rem;color:var(--cd)}
.md-comment-form .comment-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:560px){.md-comment-form .comment-form-grid{grid-template-columns:1fr}}
.comment-form-email{display:none!important}
.form-field{display:flex;flex-direction:column;gap:.375rem}
.form-field label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cm)}
.form-field input,.form-field textarea{padding:.75rem 1rem;border:1.5px solid var(--cbrl);border-radius:var(--r-md);background:var(--cbg);color:var(--cd);outline:none;font-family:var(--fb);font-size:.875rem;transition:border-color var(--tf),box-shadow var(--tf)}
.form-field input:focus,.form-field textarea:focus{border-color:var(--cp);box-shadow:0 0 0 3px var(--cp-bg)}
.comment-field-wrap{margin-bottom:1.25rem}
.comment-submit-wrap{padding-top:.5rem}
.md-submit-full{width:100%!important;justify-content:center!important;padding:1rem 1.5rem!important}

/* ── Logo fix ── */
.site-logo img{height:var(--logo-h,36px)!important;width:auto!important;max-height:var(--logo-h,36px)!important;object-fit:contain!important;display:block}

/* ── Custom login ── */
.login-page-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:768px){.login-page-wrap{grid-template-columns:1fr}}
.login-page-left{background:linear-gradient(135deg,var(--cp),var(--cp-h));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;position:relative;overflow:hidden}
@media(max-width:768px){.login-page-left{display:none}}
.login-page-left::before{content:'';position:absolute;width:350px;height:350px;border-radius:50%;background:rgba(255,255,255,.06);top:-80px;right:-80px}
.login-page-left::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-50px;left:-50px}
.login-page-left__logo{font-family:var(--fh);font-size:2.25rem;font-weight:700;color:#fff;text-decoration:none;position:relative;z-index:1}
.login-page-left__text{color:rgba(255,255,255,.7);text-align:center;max-width:300px;line-height:1.65;position:relative;z-index:1;margin-top:.75rem;font-size:.95rem}
.login-page-right{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;background:var(--cbg);overflow-y:auto}
.login-card{width:100%;max-width:420px}
.login-card__head{text-align:center;margin-bottom:1.75rem}
.login-card__title{font-size:1.6rem;color:var(--cd);margin-bottom:.375rem}
.login-card__sub{font-size:.875rem;color:var(--cm)}
.google-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.875rem 1.5rem;background:var(--ccard);border:1.5px solid var(--cbrl);border-radius:var(--r-md);font-size:.875rem;font-weight:600;color:var(--cd);text-decoration:none;transition:all var(--tb);margin-bottom:1rem}
.google-btn:hover{border-color:var(--cp);box-shadow:var(--sh-sm);color:var(--cd)}
.login-divider{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;color:var(--cm);font-size:.78rem}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--cbrl)}
.login-form .form-field{margin-bottom:.875rem}
.login-submit{width:100%!important;justify-content:center!important;padding:1rem!important;font-size:.95rem!important;margin-top:.5rem}
.login-footer{text-align:center;margin-top:1.25rem;font-size:.84rem;color:var(--cm)}
.login-footer a{color:var(--cp);font-weight:600}
.notice{padding:.75rem 1.25rem;border-radius:var(--r-md);font-size:.875rem}
.notice--ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.notice--err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.notice--warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
img.avatar,img.avatar-photo{border-radius:50%!important;object-fit:cover}

/* ── Pagination — matches WordPress the_posts_pagination() output ──
   HTML: nav.navigation.pagination > div.nav-links > a.page-numbers / span.page-numbers
── */
.navigation.pagination{margin:2.5rem 0 .5rem}
.navigation.pagination .nav-links{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.375rem
}
.navigation.pagination .nav-links a.page-numbers,
.navigation.pagination .nav-links span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 .625rem;
  border-radius:var(--r-md,8px);
  border:1.5px solid var(--cbrl);
  background:var(--ccard);
  font-size:.875rem;font-weight:600;
  color:var(--cb);text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
  line-height:1
}
.navigation.pagination .nav-links span.page-numbers.current{
  background:var(--cp);color:#fff;border-color:var(--cp);cursor:default
}
.navigation.pagination .nav-links a.page-numbers:hover{
  background:var(--cp-bg,rgba(42,157,143,.1));border-color:var(--cp);color:var(--cp)
}
.navigation.pagination .nav-links span.page-numbers.dots{
  background:transparent;border-color:transparent;color:var(--cm);cursor:default;min-width:24px
}
.navigation.pagination .nav-links a.page-numbers.prev,
.navigation.pagination .nav-links a.page-numbers.next{
  padding:0 1rem;gap:.375rem;font-size:.8rem;letter-spacing:.02em
}

/* ══ TYPESTAR GRID — Sidebar right on desktop ══ */
.typestar-body{padding:2.5rem 0 4rem}
.typestar-grid{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start}
.typestar-main{min-width:0}
.typestar-sidebar{position:sticky;top:calc(var(--hh,70px) + 1.5rem);display:flex;flex-direction:column;gap:1.25rem}
@media(max-width:960px){
  .typestar-grid{grid-template-columns:1fr}
  .typestar-sidebar{position:static;top:auto}
}

/* ② Post hero — spacing & container */
.post-hero{padding:3.5rem 0 5rem}
.post-hero .container{max-width:var(--mw);padding:0 1.5rem}
.post-hero__inner{max-width:800px !important;margin:0 auto !important;text-align:left !important}
.post-hero__cat{margin-bottom:.75rem}
.post-hero__title{text-align:left !important}
.post-hero__meta{justify-content:flex-start !important;text-align:left}

/* ② TOC box — proper margin so meta info doesn't touch border */
.toc-box{margin-top:1.5rem !important;margin-bottom:1.75rem !important;padding:1rem 1.25rem !important}
.toc-box__title{padding-bottom:.75rem !important}
.post-featured-image{
  margin:-2rem 0 2.5rem !important;
  border-radius:var(--r-xl);
  box-shadow:0 12px 48px rgba(0,0,0,.18) !important;
  border:3px solid rgba(255,255,255,.07);
  position:relative;z-index:5;
}

/* Newsletter sidebar widget fix */
.widget.widget--nl{background:linear-gradient(135deg,var(--cp),var(--cp-h))!important;border-color:transparent!important;padding:1.5rem}
.widget--nl .widget__title{color:rgba(255,255,255,.8)!important;font-size:.8rem!important;text-transform:uppercase;letter-spacing:.08em}
.widget--nl p{color:rgba(255,255,255,.7)!important;font-size:.82rem!important;line-height:1.6;margin-bottom:.875rem}
.widget--nl .nl-mini-input{width:100%;padding:.7rem 1rem;border-radius:var(--r-md);border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;font-size:.85rem;outline:none;box-sizing:border-box;margin-bottom:.5rem}
.widget--nl .nl-mini-input::placeholder{color:rgba(255,255,255,.5)}
.widget--nl .nl-mini-input:focus{border-color:rgba(255,255,255,.6)}
.widget--nl .nl-mini-btn{width:100%;padding:.7rem;border-radius:var(--r-full);background:#fff;color:var(--cp);border:none;font-size:.85rem;font-weight:700;cursor:pointer;transition:opacity var(--tf)}
.widget--nl .nl-mini-btn:hover{opacity:.88}

/* ── DARK MODE: Mini newsletter sidebar widget ── */
[data-theme="dark"] .widget.widget--nl{
  background:linear-gradient(135deg,rgba(61,191,176,.18),rgba(47,168,152,.12))!important;
  border:1.5px solid rgba(61,191,176,.28)!important;
  box-shadow:0 4px 24px rgba(0,0,0,.35)!important;
}
[data-theme="dark"] .widget--nl .widget__title{color:var(--cp)!important}
[data-theme="dark"] .widget--nl p{color:var(--cb)!important}
[data-theme="dark"] .widget--nl .nl-mini-input{
  background:var(--cbga)!important;
  border-color:var(--cbr)!important;
  color:var(--cd)!important;
}
[data-theme="dark"] .widget--nl .nl-mini-input::placeholder{color:var(--cm)!important}
[data-theme="dark"] .widget--nl .nl-mini-input:focus{border-color:var(--cp)!important;box-shadow:0 0 0 2px rgba(61,191,176,.2)!important}
[data-theme="dark"] .widget--nl .nl-mini-btn{
  background:var(--cp)!important;
  color:#fff!important;
}
[data-theme="dark"] .widget--nl .nl-mini-btn:hover{background:var(--cp-h)!important;opacity:1!important}

/* ── DARK MODE: Big newsletter section (footer-এর উপরে) ── */
[data-theme="dark"] .newsletter-section{
  background:linear-gradient(135deg,#0d2f2d 0%,#071f1e 100%);
  border-top:1px solid var(--cbr);
  border-bottom:1px solid var(--cbr);
}
[data-theme="dark"] .newsletter-section::before,
[data-theme="dark"] .newsletter-section::after{
  background:rgba(61,191,176,.06);
}
[data-theme="dark"] .newsletter-eye{color:var(--cp)}
[data-theme="dark"] .newsletter-title{color:var(--cd)}
[data-theme="dark"] .newsletter-sub{color:var(--cb)}
[data-theme="dark"] .newsletter-form{
  background:rgba(61,191,176,.08);
  border-color:rgba(61,191,176,.25);
}
[data-theme="dark"] .newsletter-form:focus-within{
  background:rgba(61,191,176,.12);
  box-shadow:0 0 0 3px rgba(61,191,176,.18);
}
[data-theme="dark"] .newsletter-form input{color:var(--cd)!important}
[data-theme="dark"] .newsletter-form input::placeholder{color:var(--cm)!important}
[data-theme="dark"] .newsletter-form input:-webkit-autofill{
  -webkit-text-fill-color:var(--cd)!important;
}
[data-theme="dark"] .newsletter-form button{
  background:var(--cp);
  color:#fff;
}
[data-theme="dark"] .newsletter-form button:hover{
  background:var(--cp-h);
  color:#fff;
  transform:translateY(-1px);
}
[data-theme="dark"] .newsletter-privacy{color:var(--cm)}

/* ⑥ Cookie FAB mobile — align with scroll-to-top */
@media(max-width:768px){
  .cookie-fab{bottom:5rem!important;left:1rem!important;width:38px!important;height:38px!important;font-size:.95rem!important}
}

/* ⑱ Color mode CSS variables — injected by PHP */
[data-theme="light"]{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* ⑲ Mobile menu improved */
.mobile-nav{position:fixed;inset:0;z-index:9998;background:var(--cbg);transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--cbrl)}
.mobile-nav__logo{font-family:var(--fh);font-size:1.4rem;font-weight:700;color:var(--cp);text-decoration:none}
.mobile-nav__close{width:36px;height:36px;border-radius:var(--r-md);border:1.5px solid var(--cbrl);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--cd)}
.mobile-nav__body{flex:1;padding:1.25rem 1.5rem}
.mobile-nav__menu{list-style:none;padding:0;margin:0 0 1.5rem}
.mobile-nav__menu li a{display:flex;align-items:center;gap:.625rem;padding:.875rem 0;border-bottom:1px solid var(--cbrl);font-size:1rem;font-weight:600;color:var(--cd);text-decoration:none;transition:color var(--tf)}
.mobile-nav__menu li a:hover,.mobile-nav__menu li.current-menu-item a{color:var(--cp)}
.mobile-nav__foot{padding:1.25rem 1.5rem;border-top:1px solid var(--cbrl);display:flex;flex-direction:column;gap:.875rem}
.mobile-nav__search{display:flex;gap:.5rem;background:var(--cbga);border-radius:var(--r-full);padding:.5rem .75rem .5rem 1rem;border:1.5px solid var(--cbrl)}
.mobile-nav__search input{flex:1;background:transparent;border:none;outline:none;color:var(--cd);font-size:.9rem}
.mobile-nav__auth{display:flex;gap:.625rem}
.mobile-nav__auth a{flex:1;text-align:center;justify-content:center}
.mobile-social{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}
.mobile-social a{width:34px;height:34px;border-radius:var(--r-md);background:var(--cbga);border:1px solid var(--cbrl);display:flex;align-items:center;justify-content:center;color:var(--cb);transition:all var(--tf)}
.mobile-social a:hover{background:var(--cp);color:#fff;border-color:var(--cp)}
.mob-nav-overlay{position:fixed;inset:0;z-index:9997;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:all .3s}
.mob-nav-overlay.show{opacity:1;visibility:visible}

/* ⑩ Login password eye icon */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:2.5rem!important;width:100%!important;box-sizing:border-box!important;min-height:44px!important}
.pw-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:var(--cm);padding:.25rem;line-height:0}
.pw-toggle:hover{color:var(--cp)}

/* ⑪ Password strength */
.pw-strength{height:4px;border-radius:2px;background:var(--cbrl);margin-top:.375rem;overflow:hidden;transition:all .3s}
.pw-strength__bar{height:100%;border-radius:2px;width:0;transition:width .3s,background .3s}
.pw-strength__bar.weak{width:33%;background:#ef4444}
.pw-strength__bar.medium{width:66%;background:#f59e0b}
.pw-strength__bar.strong{width:100%;background:#22c55e}
.pw-strength__label{font-size:.7rem;margin-top:.25rem;font-weight:600}
.pw-strength__label.weak{color:#ef4444}
.pw-strength__label.medium{color:#f59e0b}
.pw-strength__label.strong{color:#22c55e}
.pw-rules{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-top:.375rem}
.pw-rule{font-size:.68rem;color:var(--cm);display:flex;align-items:center;gap:.25rem}
.pw-rule.ok{color:#22c55e}
.pw-rule.ok::before{content:'✓'}
.pw-rule:not(.ok)::before{content:'·'}

/* ⑬ Search live results */
.search-results-live{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:var(--ccard);border:1px solid var(--cbrl);border-radius:var(--r-xl);box-shadow:var(--sh-lg);z-index:999;max-height:380px;overflow-y:auto;display:none}
.search-results-live.show{display:block}
.search-result-item{display:flex;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--cbrl);text-decoration:none;transition:background var(--tf)}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--cbga)}
.search-result-item__thumb{width:48px;height:38px;border-radius:var(--r-md);overflow:hidden;flex-shrink:0;background:var(--cbga)}
.search-result-item__thumb img{width:100%;height:100%;object-fit:cover}
.search-result-item__title{font-size:.85rem;font-weight:600;color:var(--cd);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.search-result-item__cat{font-size:.7rem;color:var(--cp);margin-top:.2rem}
.search-results-live__empty{padding:1.25rem;text-align:center;color:var(--cm);font-size:.875rem}
.search-results-live__all{display:block;padding:.75rem 1rem;text-align:center;font-size:.8rem;font-weight:600;color:var(--cp);border-top:1px solid var(--cbrl);text-decoration:none}
.search-results-live__all:hover{background:var(--cp-bg)}

/* ══ v6 ADDITIONS ══ */

/* Post card footer — mobile single line */
@media(max-width:420px){
  .post-card__foot{
    flex-wrap:nowrap;
    gap:.25rem;
    font-size:.67rem;
  }
  .post-card__by{
    font-size:.67rem;
    max-width:60px;
  }
  .post-card__dt{
    font-size:.62rem;
  }
}

/* Post hero meta — ensure one line on mobile (override) */
@media(max-width:640px){
  .post-hero__meta{
    flex-wrap:nowrap !important;
    overflow:hidden !important;
    gap:.3rem !important;
    font-size:.72rem !important;
    white-space:nowrap !important;
  }
  .post-hero__author img.post-hero__av,
  .post-hero__author .post-hero__av{
    display:none !important;
  }
  .post-hero__author-name{
    max-width:72px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Color scheme declarations */
[data-theme="light"]{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* ══ FIX #5: Cookie FAB — align with back-to-top on mobile ══ */
.cookie-fab {
  position: fixed;
  bottom: 1.5rem;
  right: calc(1.5rem + 48px + .75rem); /* beside back-to-top */
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cp);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .2s, box-shadow .2s;
}
.cookie-fab:hover { transform: scale(1.1); }

/* ══ FIX #11: Cookie prefs modal buttons — no overflow ══ */
.cookie-prefs-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.cookie-prefs-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .78rem;
  padding: .6rem .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
}
@media(max-width:420px) {
  .cookie-prefs-actions { flex-direction: column; }
  .cookie-prefs-actions .btn { flex: unset; width: 100%; }
}

/* ══ FIX #7: Avatar progress bar — below name, not overlapping ══ */
.acc-avatar-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
#avatarProgress {
  width: 100%;
  max-width: 120px;
  margin: .375rem auto 0 !important;
}
#avatarStatus {
  text-align: center;
  display: block;
  width: 100%;
  font-size: .72rem;
}

/* ══ FIX #8: Mobile post-hero meta — author on own line ══ */
@media(max-width:600px) {
  .post-hero__meta {
    flex-wrap: wrap;
    gap: .375rem .5rem;
  }
  .post-hero__author {
    width: 100%;
    margin-bottom: .25rem;
  }
  .post-hero__sep:first-of-type {
    display: none;
  }
}

/* ══ FIX #13: Tag archive page — use theme layout not broken WP default ══ */
.tag-archive-wrap { padding: 2rem 0; }


/* ══ FIX: WordPress adds .tag class to body on tag archive pages.
   Reset any inherited styles that break layout. ══ */
body.tag {
  display: block !important;
  padding: 0 !important;
  background: var(--cbg) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  border-radius: 0 !important;
  border: none !important;
  color: var(--cb) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════
   FOOTER MOBILE RESPONSIVE FIX
   ══════════════════════════════════════════════════ */

/* ── Footer grid: brand column spans full width on mobile ── */
@media(max-width:700px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 2rem 1.25rem !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--footer-border) !important;
    margin-bottom: .25rem !important;
  }
  .footer-stats {
    justify-content: flex-start;
    gap: 1.25rem;
  }
  .footer-socials { margin-top: .25rem; }
}
@media(max-width:480px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 1rem !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }
}
@media(max-width:340px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════
   GORGEOUS ENGAGE BAR & REACTION SYSTEM — v2
   ══════════════════════════════════════════════════ */

/* ── Engage Bar Container ── */
.fb-engage-bar {
  background: var(--ccard);
  border: 1px solid var(--cbrl);
  border-radius: 20px;
  margin: 1.75rem 0;
  overflow: visible;
  box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  position: relative;
}

/* ── Stats Row (emoji pile + comment count) ── */
.fb-react-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--cbrl);
  min-height: 38px;
  gap: .5rem;
}

.fb-react-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: 20px;
  transition: background .18s;
  text-decoration: none;
}
.fb-react-summary-btn:hover {
  background: var(--cp-bg, rgba(42,157,143,.08));
}

.fb-react-emojis {
  display: flex;
  align-items: center;
}
.fb-react-emojis .fb-re {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ccard);
  border: 2px solid var(--cbrl);
  font-size: .85rem;
  line-height: 1;
  margin-left: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: transform .18s;
  position: relative;
}
.fb-react-emojis .fb-re:first-child { margin-left: 0; }
.fb-react-summary-btn:hover .fb-re { transform: scale(1.15); }

.fb-react-total {
  font-size: .82rem;
  font-weight: 600;
  color: var(--cb);
  line-height: 1;
}

.fb-react-spacer { flex: 1; }

.fb-cmt-total-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cm);
  padding: .25rem .5rem;
  border-radius: 20px;
  transition: color .18s, background .18s;
  white-space: nowrap;
}
.fb-cmt-total-btn:hover {
  color: var(--cp);
  background: var(--cp-bg, rgba(42,157,143,.08));
}

/* ── Divider ── */
.fb-bar-divider {
  height: 1px;
  background: var(--cbrl);
  display: none; /* already handled by border-bottom on summary */
}

/* ── Action Row (3 buttons) ── */
.fb-action-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* ── Each Action Button ── */
.fb-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .75rem .5rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--cbrl);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: var(--cm);
  transition: background .18s, color .18s;
  letter-spacing: .01em;
  position: relative;
  border-radius: 0;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
}
.fb-action-row .fb-action-wrap { flex: 1; display: flex; position: relative; }
.fb-action-row .fb-action-wrap .fb-action-btn { flex: 1; border-radius: 0; }
.fb-action-btn:last-child,
.fb-action-row > *:last-child { border-right: none; }
.fb-action-btn:first-child { border-radius: 0 0 0 20px; }
.fb-action-btn:last-child  { border-radius: 0 0 20px 0; }
.fb-action-row .fb-action-wrap:first-child .fb-action-btn { border-radius: 0 0 0 20px; }
.fb-action-row > button:last-child { border-radius: 0 0 20px 0; }

.fb-action-btn:hover {
  background: var(--cp-bg, rgba(42,157,143,.07));
  color: var(--cp);
}
.fb-action-btn svg { flex-shrink: 0; }

/* Active / reacted state */
.fb-action-btn.active {
  color: var(--cp) !important;
}
.fb-action-btn.active .fb-react-emoji {
  filter: drop-shadow(0 0 5px rgba(42,157,143,.4));
}

/* Emoji icon in like button */
.fb-react-emoji {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  transition: transform .2s cubic-bezier(.34,1.6,.64,1);
}
.fb-action-btn:hover .fb-react-emoji {
  transform: scale(1.25) rotate(-8deg);
}
.fb-action-btn.active .fb-react-emoji {
  animation: md-bounce .35s cubic-bezier(.34,1.6,.64,1);
}
@keyframes md-bounce {
  0%  { transform: scale(1); }
  50% { transform: scale(1.4) rotate(-12deg); }
  100%{ transform: scale(1); }
}

/* ── Reaction Popup (Post) — gorgeous floating pill ── */
.fb-action-wrap { position: relative; }

.fb-react-popup {
  position: absolute !important;
  bottom: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) scale(.8) translateY(10px) !important;
  transform-origin: bottom center !important;
  background: var(--ccard) !important;
  border: 1px solid var(--cbrl) !important;
  border-radius: 50px !important;
  padding: .5rem .65rem !important;
  display: flex !important;
  gap: .2rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .22s, transform .22s cubic-bezier(.34,1.2,.64,1), visibility .22s !important;
  z-index: 1000 !important;
  white-space: nowrap !important;
}
.fb-react-popup::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 6px;
  background: var(--ccard);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-left: 1px solid var(--cbrl);
  border-right: 1px solid var(--cbrl);
}
.fb-react-popup.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) scale(1) translateY(0) !important;
  pointer-events: auto !important;
}

/* Each emoji button in post popup */
.fb-re-btn {
  background: none !important;
  border: none !important;
  font-size: 1.6rem !important;
  cursor: pointer !important;
  padding: .3rem .35rem !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1 !important;
  transition: transform .18s cubic-bezier(.34,1.6,.64,1), background .15s !important;
  position: relative !important;
}
.fb-re-btn span {
  font-size: .6rem !important;
  font-weight: 700 !important;
  color: var(--cd) !important;
  opacity: 0 !important;
  transform: translateY(2px) !important;
  transition: opacity .15s, transform .15s !important;
  display: block !important;
  white-space: nowrap !important;
}
.fb-re-btn:hover {
  transform: scale(1.4) translateY(-5px) !important;
  background: var(--cp-bg, rgba(42,157,143,.1)) !important;
}
.fb-re-btn:hover span {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Reaction popup inside comment overlay (comment reactions) ── */
.md-react-popup {
  background: var(--ccard) !important;
  border: 1px solid var(--cbrl) !important;
  border-radius: 50px !important;
  padding: .45rem .6rem !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.07) !important;
  transform: scale(.82) translateY(8px) !important;
  transform-origin: bottom left !important;
  transition: opacity .2s, transform .22s cubic-bezier(.34,1.2,.64,1), visibility .2s !important;
}
.md-react-popup.show {
  transform: scale(1) translateY(0) !important;
}
.md-crp-btn {
  border-radius: 50% !important;
  transition: transform .18s cubic-bezier(.34,1.6,.64,1), background .15s !important;
}
.md-crp-btn:hover {
  transform: scale(1.4) translateY(-4px) !important;
  background: var(--cp-bg, rgba(42,157,143,.1)) !important;
}

/* ── React Modal — who reacted ── */
.md-react-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.md-react-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}
.md-react-modal-card {
  position: relative;
  z-index: 1;
  background: var(--ccard);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
  overflow: hidden;
  animation: md-modal-in .28s cubic-bezier(.34,1.2,.64,1);
}
@keyframes md-modal-in {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.md-react-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--cbrl);
  font-weight: 800;
  font-size: .95rem;
  color: var(--cd);
}
.md-react-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--cbrl);
  background: var(--cbga);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--cm);
  font-size: 1rem;
  transition: background .18s, color .18s, border-color .18s;
}
.md-react-modal-close:hover {
  background: var(--cp);
  border-color: var(--cp);
  color: #fff;
}

/* Tabs */
.md-react-modal-tabs {
  display: flex;
  gap: .25rem;
  padding: .6rem .875rem;
  border-bottom: 1px solid var(--cbrl);
  overflow-x: auto;
  scrollbar-width: none;
}
.md-react-modal-tabs::-webkit-scrollbar { display: none; }

.md-rmt-tab {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 20px;
  border: 1.5px solid var(--cbrl);
  background: transparent;
  font-size: .75rem;
  font-weight: 700;
  color: var(--cm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
  flex-shrink: 0;
}
.md-rmt-tab:hover {
  background: var(--cbga);
  border-color: var(--cp);
  color: var(--cp);
}
.md-rmt-tab.active {
  background: var(--cp);
  border-color: var(--cp);
  color: #fff;
}
.md-rmt-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 800;
  background: rgba(255,255,255,.25);
  color: inherit;
  line-height: 1;
}
.md-rmt-tab:not(.active) .md-rmt-count {
  background: var(--cbga);
  color: var(--cm);
}

/* Modal body — reactor list */
.md-react-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--cbrl) transparent;
}
.md-react-modal-body::-webkit-scrollbar { width: 4px; }
.md-react-modal-body::-webkit-scrollbar-thumb { background: var(--cbrl); border-radius: 2px; }

.md-rmt-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .6rem 1.25rem;
  text-decoration: none;
  transition: background .15s;
  border-radius: 0;
}
.md-rmt-row:hover { background: var(--cbga); }

.md-rmt-av-wrap {
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 42px;
}
.md-rmt-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cbrl);
  display: block;
}
.md-rmt-react-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ccard);
  border: 1.5px solid var(--cbrl);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.md-rmt-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--cd);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-rmt-row:hover .md-rmt-name { color: var(--cp); }

.md-rmt-empty {
  text-align: center;
  color: var(--cm);
  font-size: .875rem;
  padding: 2rem 1rem;
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .fb-engage-bar {
    border-radius: 16px;
    margin: 1.25rem 0;
  }
  .fb-react-summary {
    padding: .55rem .875rem;
  }
  .fb-action-btn {
    padding: .65rem .35rem;
    font-size: .66rem;
    gap: .3rem;
    letter-spacing: .03em;
  }
  .fb-action-btn svg {
    width: 17px; height: 17px;
  }
  .fb-react-emoji {
    font-size: .95rem;
  }
  .fb-re-btn {
    font-size: 1.35rem !important;
    padding: .25rem .3rem !important;
  }
  .fb-react-popup {
    padding: .4rem .5rem !important;
    gap: .1rem !important;
    left: 0 !important;
    right: auto !important;
    transform: scale(.8) translateY(10px) !important;
    transform-origin: bottom left !important;
  }
  .fb-react-popup.show {
    transform: scale(1) translateY(0) !important;
  }
  .fb-react-popup::after {
    left: 20px !important;
    transform: none !important;
  }
  .md-react-modal-card {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 75vh;
  }
  .md-react-modal {
    align-items: flex-end;
    padding: 0;
  }
  @keyframes md-modal-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 380px) {
  .fb-action-btn {
    padding: .6rem .2rem;
    font-size: .6rem;
    letter-spacing: 0;
  }
  .fb-action-btn span { display: none; }
  .fb-react-emoji { font-size: 1.1rem; }
  .fb-action-btn svg { width: 18px; height: 18px; }
}

/* ── Dark mode tweaks ── */
[data-theme="dark"] .fb-engage-bar {
  box-shadow: 0 4px 28px rgba(0,0,0,.28), 0 1px 6px rgba(0,0,0,.15);
}
[data-theme="dark"] .fb-react-popup {
  box-shadow: 0 10px 40px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.2) !important;
}
[data-theme="dark"] .md-react-modal-card {
  box-shadow: 0 28px 90px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.25);
}
[data-theme="dark"] .md-react-modal-backdrop {
  background: rgba(0,0,0,.65);
}

/* ── Footer bottom bar: fix mobile stacking ── */
/* Legal links উপরে, copyright text একদম নিচে */
@media(max-width:640px) {
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: .75rem !important;
    padding: 1.25rem 0 !important;
  }
  .footer-bottom__copy {
    order: 2 !important;
    margin: 0 !important;
  }
  .footer-bottom__links {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .5rem .875rem !important;
  }
  .footer-bottom__links ul {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .375rem .75rem !important;
  }
  .footer-bottom__links ul li { margin: 0 !important; }
  .footer-bottom__dot { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   HEADER — GORGEOUS PREMIUM v4
   Concept: Airy tall bar · Deep glass · Soft aurora pulse ·
            Sculpted pill nav · Magnetic icons · Luxury spacing
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Header shell ── */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: auto !important;
  padding: 1.1rem 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  transition: padding .4s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: none !important;
}

/* Scrolled: compact */
.site-header.scrolled {
  padding: .65rem 0 !important;
}

/* Deep frosted glass layer */
.site-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(237,253,250,.88) !important;
  backdrop-filter: blur(36px) saturate(220%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(36px) saturate(220%) brightness(1.05) !important;
  border-bottom: 1px solid rgba(42,157,143,.10) !important;
  transition: background .4s ease, box-shadow .4s ease !important;
  z-index: 0 !important;
}

/* Aurora shimmer gradient line at bottom */
.site-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 8% !important;
  right: 8% !important;
  height: 1.5px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(42,157,143,.0) 5%,
    rgba(42,157,143,.55) 35%,
    rgba(255,107,157,.55) 65%,
    rgba(255,107,157,.0) 95%,
    transparent 100%) !important;
  opacity: 0 !important;
  transition: opacity .5s ease, left .4s ease, right .4s ease !important;
  z-index: 1 !important;
  border-radius: 2px !important;
}

.site-header.scrolled::after {
  opacity: 1 !important;
  left: 4% !important;
  right: 4% !important;
}

.site-header.scrolled::before {
  background: rgba(232,252,249,.95) !important;
  box-shadow:
    0 1px 0 rgba(42,157,143,.06),
    0 4px 16px rgba(42,157,143,.07),
    0 12px 48px rgba(42,157,143,.08),
    0 2px 8px rgba(0,0,0,.04) !important;
}

/* Dark mode */
[data-theme="dark"] .site-header::before {
  background: rgba(7,22,21,.90) !important;
  border-bottom-color: rgba(61,191,176,.08) !important;
}
[data-theme="dark"] .site-header.scrolled::before {
  background: rgba(6,19,18,.96) !important;
  box-shadow:
    0 1px 0 rgba(61,191,176,.06),
    0 8px 48px rgba(0,0,0,.55),
    0 2px 12px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .site-header::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(61,191,176,.0) 5%,
    rgba(61,191,176,.45) 35%,
    rgba(255,133,176,.40) 65%,
    rgba(255,133,176,.0) 95%,
    transparent 100%) !important;
}

/* ── 2. Inner grid ── */
.header-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 2rem !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
}

/* ── 3. Logo ── */
.site-logo {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1) !important;
}
.site-logo:hover {
  transform: scale(1.04) !important;
}

/* Logo image sizing */
.site-logo img.logo-img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: filter .3s, transform .3s cubic-bezier(.34,1.3,.64,1) !important;
  filter: drop-shadow(0 2px 8px rgba(42,157,143,.18)) !important;
}
.site-logo:hover img.logo-img {
  filter: drop-shadow(0 4px 16px rgba(42,157,143,.32)) !important;
}

.site-logo__text {
  font-family: var(--fh) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: -.05em !important;
  color: var(--cd) !important;
  line-height: 1 !important;
  transition: color .25s !important;
}
.site-logo__text em {
  font-style: normal !important;
  background: linear-gradient(135deg, var(--cp) 0%, var(--ca) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Gradient dot after logo text */
.site-logo__text::after {
  content: '.' !important;
  background: linear-gradient(135deg, var(--ca), var(--cp)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 4. Nav — elevated pill ── */
.main-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.main-nav > ul {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: .35rem .45rem !important;
  background: rgba(42,157,143,.07) !important;
  border: 1px solid rgba(42,157,143,.14) !important;
  border-radius: 50px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 16px rgba(42,157,143,.07), inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition: background .3s, border-color .3s, box-shadow .3s !important;
}
[data-theme="dark"] .main-nav > ul {
  background: rgba(61,191,176,.06) !important;
  border-color: rgba(61,191,176,.12) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.main-nav a {
  display: flex !important;
  align-items: center !important;
  padding: .5rem 1.1rem !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: var(--cb) !important;
  border-radius: 50px !important;
  transition: color .2s, background .2s, box-shadow .2s !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  text-decoration: none !important;
  position: relative !important;
}
.main-nav a:hover {
  color: var(--cp) !important;
  background: rgba(42,157,143,.11) !important;
}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  background: linear-gradient(135deg, var(--cp) 0%, var(--cp-h) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(42,157,143,.35) !important;
}
[data-theme="dark"] .main-nav .current-menu-item > a,
[data-theme="dark"] .main-nav .current_page_item > a {
  background: linear-gradient(135deg, var(--cp) 0%, var(--cp-h) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(42,157,143,.45) !important;
}

/* Dropdown */
.main-nav .menu-item-has-children { position: relative !important; }
.main-nav .sub-menu {
  position: absolute !important;
  top: calc(100% + 16px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-10px) scale(.94) !important;
  min-width: 220px !important;
  background: var(--ccard) !important;
  border: 1px solid var(--cbrl) !important;
  border-radius: 20px !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,.04),
    0 20px 64px rgba(0,0,0,.12),
    0 4px 20px rgba(42,157,143,.10) !important;
  padding: .5rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .25s, transform .28s cubic-bezier(.34,1.2,.64,1), visibility .25s !important;
  pointer-events: none !important;
  list-style: none !important;
}
.main-nav .menu-item-has-children:hover .sub-menu,
.main-nav .menu-item-has-children:focus-within .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.main-nav .sub-menu a {
  font-size: .8rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: .6rem .95rem !important;
  border-radius: var(--r-md) !important;
  color: var(--cb) !important;
  font-weight: 500 !important;
}
.main-nav .sub-menu a:hover { color: var(--cp) !important; background: var(--cp-bg) !important; }

/* ── 5. Header actions ── */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

/* Icon btn base */
.hdr-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: var(--cm) !important;
  transition: color .22s, transform .25s cubic-bezier(.34,1.3,.64,1) !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
}
/* Radial ripple on hover */
.hdr-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at center, rgba(42,157,143,.20) 0%, transparent 72%) !important;
  opacity: 0 !important;
  transform: scale(0.3) !important;
  transition: opacity .28s, transform .35s cubic-bezier(.34,1.4,.64,1) !important;
}
.hdr-btn:hover::before {
  opacity: 1 !important;
  transform: scale(1) !important;
}
.hdr-btn:hover {
  color: var(--cp) !important;
  transform: scale(1.12) !important;
}

/* ── DARK MODE PILL TOGGLE ───────────────────── */
/* ── FOUC fix: pill position set via html class BEFORE JS loads ── */
/* Anti-FOUC inline script adds .theme-is-dark to <html> immediately */
html.theme-is-dark .dm-pill-thumb {
  transform: translateX(24px) !important;
  background: linear-gradient(135deg, #1a4d49 0%, #163f3c 100%) !important;
  box-shadow: 0 2px 10px rgba(61,191,176,.35), 0 1px 4px rgba(0,0,0,.25) !important;
  color: #a5f3eb !important;
}
html.theme-is-dark .dm-pill-thumb .dm-sun  { display: none  !important; }
html.theme-is-dark .dm-pill-thumb .dm-moon { display: block !important; }
html.theme-is-dark .dm-pill-track {
  background: linear-gradient(135deg, #0d2e2c 0%, #0a2321 100%) !important;
  border-color: rgba(61,191,176,.38) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.30),
              0 0 12px rgba(61,191,176,.15),
              0 1px 4px rgba(0,0,0,.25) !important;
}
html.theme-is-dark .dm-pill-track::after {
  background: rgba(165,243,235,.5) !important;
  box-shadow: -7px -3px 0 rgba(165,243,235,.3),
              -4px 4px 0 rgba(165,243,235,.2) !important;
}

.dm-pill-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.dm-pill-toggle:focus-visible .dm-pill-track {
  box-shadow: 0 0 0 3px rgba(42,157,143,.45) !important;
}

/* The track — the outer "pill" shell */
.dm-pill-track {
  position: relative !important;
  width: 52px !important;
  height: 28px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #e2f5f3 0%, #d8f0ed 100%) !important;
  border: 1.5px solid rgba(42,157,143,.28) !important;
  transition: background .38s cubic-bezier(.4,0,.2,1),
              border-color .38s,
              box-shadow .38s !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.06), 0 1px 4px rgba(42,157,143,.10) !important;
  display: flex !important;
  align-items: center !important;
}

/* Active (dark mode) track */
.dm-pill-toggle.is-dark .dm-pill-track {
  background: linear-gradient(135deg, #0d2e2c 0%, #0a2321 100%) !important;
  border-color: rgba(61,191,176,.38) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.30),
              0 0 12px rgba(61,191,176,.15),
              0 1px 4px rgba(0,0,0,.25) !important;
}

/* Hover */
.dm-pill-toggle:hover .dm-pill-track {
  border-color: var(--cp) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.07),
              0 0 0 3px rgba(42,157,143,.14),
              0 2px 8px rgba(42,157,143,.18) !important;
}
.dm-pill-toggle.is-dark:hover .dm-pill-track {
  border-color: var(--cp) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.32),
              0 0 0 3px rgba(61,191,176,.18),
              0 0 16px rgba(61,191,176,.20) !important;
}

/* The thumb — sliding circle */
.dm-pill-thumb {
  position: absolute !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fff 0%, #f0faf9 100%) !important;
  box-shadow: 0 2px 8px rgba(42,157,143,.22), 0 1px 3px rgba(0,0,0,.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .38s cubic-bezier(.34,1.25,.64,1),
              background .38s,
              box-shadow .38s !important;
  color: #f59e0b !important; /* sun: amber */
  z-index: 1 !important;
}

/* Slide right when dark */
.dm-pill-toggle.is-dark .dm-pill-thumb {
  transform: translateX(24px) !important;
  background: linear-gradient(135deg, #1a4d49 0%, #163f3c 100%) !important;
  box-shadow: 0 2px 10px rgba(61,191,176,.35), 0 1px 4px rgba(0,0,0,.25) !important;
  color: #a5f3eb !important; /* moon: teal glow */
}

/* Icon visibility */
.dm-pill-thumb .dm-sun  { display: block !important; }
.dm-pill-thumb .dm-moon { display: none  !important; }
.dm-pill-toggle.is-dark .dm-pill-thumb .dm-sun  { display: none  !important; }
.dm-pill-toggle.is-dark .dm-pill-thumb .dm-moon { display: block !important; }

/* Tiny star dots in track (decorative) */
.dm-pill-track::after {
  content: '' !important;
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(61,191,176,.0) !important;
  box-shadow: 0 0 0 0 rgba(61,191,176,.0) !important;
  transition: background .38s, box-shadow .38s !important;
}
.dm-pill-toggle.is-dark .dm-pill-track::after {
  background: rgba(165,243,235,.5) !important;
  box-shadow: -7px -3px 0 rgba(165,243,235,.3),
              -4px 4px 0 rgba(165,243,235,.2) !important;
}

/* Mobile: slightly smaller */
@media (max-width: 960px) {
  .dm-pill-track {
    width: 46px !important;
    height: 26px !important;
  }
  .dm-pill-thumb {
    width: 18px !important;
    height: 18px !important;
    left: 3px !important;
  }
  .dm-pill-toggle.is-dark .dm-pill-thumb,
  html.theme-is-dark .dm-pill-thumb {
    transform: translateX(20px) !important;
  }
}
@media (max-width: 380px) {
  html.theme-is-dark .dm-pill-thumb {
    transform: translateX(18px) !important;
  }
}
/* ─────────────────────────────────────────────── */

/* Avatar */
.hdr-btn--avatar {
  border: 2.5px solid transparent !important;
  background: linear-gradient(var(--cbg), var(--cbg)) padding-box,
              linear-gradient(135deg, var(--cp), var(--ca)) border-box !important;
  overflow: visible !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(42,157,143,.20) !important;
}
.hdr-btn--avatar:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 0 0 4px rgba(42,157,143,.18), 0 4px 16px rgba(42,157,143,.25) !important;
}
.hdr-btn--avatar::before { display: none !important; }
.hdr-avatar-img,
.hdr-btn--avatar img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Login pill */
.header-actions > a.btn--outline {
  height: 36px !important;
  padding: 0 1.1rem !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  border: 1.5px solid rgba(42,157,143,.3) !important;
  color: var(--cp) !important;
  background: rgba(42,157,143,.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: color .22s, border-color .22s, box-shadow .22s, transform .22s, background .22s !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.header-actions > a.btn--outline::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, var(--cp), var(--cp-h)) !important;
  opacity: 0 !important;
  transition: opacity .22s !important;
  z-index: -1 !important;
}
.header-actions > a.btn--outline:hover {
  color: #fff !important;
  border-color: var(--cp) !important;
  box-shadow: 0 4px 20px rgba(42,157,143,.35) !important;
  transform: translateY(-1px) !important;
}
.header-actions > a.btn--outline:hover::before { opacity: 1 !important; }

/* ── 6. Menu Toggle — WAFFLE GRID ICON ── */
.menu-toggle {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  overflow: hidden !important;
}

/* Soft pill background */
.menu-toggle::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 14px !important;
  background: rgba(42,157,143,.10) !important;
  border: 1.5px solid rgba(42,157,143,.22) !important;
  opacity: 0 !important;
  transition: opacity .28s, background .28s, border-color .28s !important;
}
.menu-toggle:hover::before { opacity: 1 !important; }
.menu-toggle.active::before {
  opacity: 1 !important;
  background: linear-gradient(135deg,
    rgba(42,157,143,.18) 0%,
    rgba(255,107,157,.12) 100%) !important;
  border-color: rgba(42,157,143,.45) !important;
}

/* Glow burst */
.mt-glow {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 14px !important;
  background: radial-gradient(circle at center,
    rgba(42,157,143,.28) 0%,
    transparent 70%) !important;
  opacity: 0 !important;
  transform: scale(.5) !important;
  transition: opacity .32s, transform .38s cubic-bezier(.34,1.3,.64,1) !important;
  pointer-events: none !important;
}
.menu-toggle:hover .mt-glow {
  opacity: .55 !important;
  transform: scale(1) !important;
}
.menu-toggle.active .mt-glow {
  opacity: .80 !important;
  transform: scale(1) !important;
  background: radial-gradient(circle at center,
    rgba(42,157,143,.32) 0%,
    rgba(255,107,157,.14) 60%,
    transparent 100%) !important;
}

/* Icon base — both SVGs stacked */
.mt-icon {
  position: absolute !important;
  z-index: 1 !important;
  transition:
    opacity .28s cubic-bezier(.4,0,.2,1),
    transform .36s cubic-bezier(.34,1.2,.64,1) !important;
}

/* Grid icon — visible by default */
.mt-icon--grid {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}
/* Close icon — hidden by default */
.mt-icon--close {
  opacity: 0 !important;
  transform: scale(.6) rotate(-90deg) !important;
  color: var(--cp) !important;
}

/* Active state: swap icons */
.menu-toggle.active .mt-icon--grid {
  opacity: 0 !important;
  transform: scale(.6) rotate(90deg) !important;
}
.menu-toggle.active .mt-icon--close {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

/* Grid dots — 9 rounded squares */
.mt-dot {
  fill: var(--cb) !important;
  transition:
    fill .22s,
    transform .36s cubic-bezier(.34,1.4,.64,1),
    opacity .22s !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

/* Hover: wave ripple — each dot gets a unique delay+transform */
.menu-toggle:hover .mt-dot:nth-child(1) { fill: var(--cp) !important; transform: scale(1.2) !important; transition-delay: .00s !important; }
.menu-toggle:hover .mt-dot:nth-child(2) { fill: rgba(94,207,195,.9) !important; transform: scale(1.0) !important; transition-delay: .04s !important; }
.menu-toggle:hover .mt-dot:nth-child(3) { fill: var(--ca) !important; transform: scale(1.2) !important; transition-delay: .08s !important; }
.menu-toggle:hover .mt-dot:nth-child(4) { fill: rgba(94,207,195,.9) !important; transform: scale(1.0) !important; transition-delay: .04s !important; }
.menu-toggle:hover .mt-dot:nth-child(5) { fill: var(--cp) !important; transform: scale(1.25) !important; transition-delay: .08s !important; }
.menu-toggle:hover .mt-dot:nth-child(6) { fill: rgba(94,207,195,.9) !important; transform: scale(1.0) !important; transition-delay: .04s !important; }
.menu-toggle:hover .mt-dot:nth-child(7) { fill: var(--ca) !important; transform: scale(1.2) !important; transition-delay: .08s !important; }
.menu-toggle:hover .mt-dot:nth-child(8) { fill: rgba(94,207,195,.9) !important; transform: scale(1.0) !important; transition-delay: .04s !important; }
.menu-toggle:hover .mt-dot:nth-child(9) { fill: var(--cp) !important; transform: scale(1.2) !important; transition-delay: .00s !important; }

/* Active: dots fade as grid icon exits */
.menu-toggle.active .mt-dot {
  fill: var(--cp) !important;
  opacity: .7 !important;
}

/* Dark mode */
[data-theme="dark"] .mt-dot { fill: rgba(255,255,255,.75) !important; }
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(1),
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(5),
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(9) { fill: var(--cp) !important; }
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(2),
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(4),
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(6),
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(8) { fill: rgba(165,243,235,.85) !important; }
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(3),
[data-theme="dark"] .menu-toggle:hover .mt-dot:nth-child(7) { fill: rgba(255,179,209,.80) !important; }
[data-theme="dark"] .menu-toggle.active .mt-icon--close { color: var(--cp) !important; }


/* ── 7. Search overlay — cinematic ── */
.search-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .3s ease, visibility .3s ease !important;
}
.search-overlay.active { opacity: 1 !important; visibility: visible !important; }

.search-overlay__bd {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(4,16,16,.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.search-overlay__panel {
  position: relative !important;
  z-index: 1 !important;
}

.search-overlay__top {
  background: var(--ccard) !important;
  border-bottom: 1px solid var(--cbrl) !important;
  padding: 1.5rem 2rem !important;
  transform: translateY(-100%) !important;
  transition: transform .35s cubic-bezier(.34,1.1,.64,1) !important;
  box-shadow: 0 12px 60px rgba(42,157,143,.1) !important;
  position: relative !important;
}
/* Gradient accent bar at top of search panel */
.search-overlay__top::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--cp), var(--ca), var(--cp)) !important;
  background-size: 200% !important;
  animation: hdr-gradient-slide 3s linear infinite !important;
}
@keyframes hdr-gradient-slide {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.search-overlay.active .search-overlay__top {
  transform: translateY(0) !important;
}
.search-overlay__bar {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.search-overlay__ico { color: var(--cp) !important; flex-shrink: 0 !important; }
.search-overlay__input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: var(--fh) !important;
  font-size: clamp(1.3rem,3.5vw,1.75rem) !important;
  color: var(--cd) !important;
  caret-color: var(--cp) !important;
}
.search-overlay__input::placeholder { color: var(--cm) !important; opacity: .5 !important; }
.search-overlay__kbd {
  background: var(--cbga) !important;
  border: 1.5px solid var(--cbrl) !important;
  border-radius: 10px !important;
  padding: .3rem .75rem !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: var(--cm) !important;
  cursor: pointer !important;
  transition: all .18s !important;
  letter-spacing: .05em !important;
  white-space: nowrap !important;
}
.search-overlay__kbd:hover {
  background: var(--cp) !important;
  color: #fff !important;
  border-color: var(--cp) !important;
}

/* ── 8. Mobile drawer nav — GORGEOUS v2 ── */
.mob-nav-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9990 !important;
  background: rgba(5,20,19,.60) !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .35s ease, visibility .35s ease !important;
}
.mob-nav-overlay.show { opacity: 1 !important; visibility: visible !important; }

/* Drawer slides from right, full-height, rounded left corners */
.mobile-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(360px, 92vw) !important;
  z-index: 9995 !important;
  background: var(--ccard) !important;
  /* Start: off-screen right + slightly scaled down + slight blur */
  transform: translateX(110%) scale(.97) !important;
  transform-origin: right center !important;
  opacity: 0 !important;
  transition:
    transform .45s cubic-bezier(.22,.9,.36,1),
    opacity .35s cubic-bezier(.4,0,.2,1),
    box-shadow .45s !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 28px 0 0 28px !important;
  box-shadow: -24px 0 100px rgba(0,0,0,.0), -4px 0 24px rgba(0,0,0,.0) !important;
  will-change: transform, opacity !important;
}
.mobile-nav.open {
  transform: translateX(0) scale(1) !important;
  opacity: 1 !important;
  box-shadow:
    -32px 0 120px rgba(0,0,0,.28),
    -6px 0 32px rgba(0,0,0,.14),
    0 0 0 1px rgba(42,157,143,.06) !important;
}

/* Staggered entrance for menu items */
.mobile-nav.open .mobile-nav__menu li {
  animation: navItemIn .38s cubic-bezier(.34,1.2,.64,1) both !important;
}
.mobile-nav.open .mobile-nav__menu li:nth-child(1) { animation-delay: .08s !important; }
.mobile-nav.open .mobile-nav__menu li:nth-child(2) { animation-delay: .13s !important; }
.mobile-nav.open .mobile-nav__menu li:nth-child(3) { animation-delay: .18s !important; }
.mobile-nav.open .mobile-nav__menu li:nth-child(4) { animation-delay: .23s !important; }
.mobile-nav.open .mobile-nav__menu li:nth-child(5) { animation-delay: .28s !important; }
.mobile-nav.open .mobile-nav__menu li:nth-child(n+6) { animation-delay: .32s !important; }

@keyframes navItemIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Staggered entrance for footer auth buttons */
.mobile-nav.open .mobile-nav__foot {
  animation: navItemIn .42s .30s cubic-bezier(.34,1.2,.64,1) both !important;
}
.mobile-nav.open .mobile-nav__search-btn {
  animation: navItemIn .38s .10s cubic-bezier(.34,1.2,.64,1) both !important;
}

/* ── Decorative top gradient band ── */
.mobile-nav::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    var(--cp) 0%,
    #5ECFC3 40%,
    var(--ca) 70%,
    #FFB3D1 100%) !important;
  z-index: 10 !important;
  border-radius: 28px 0 0 0 !important;
}

/* ── Head: logo + close ── */
.mobile-nav__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.5rem 1.5rem 1.2rem !important;
  flex-shrink: 0 !important;
  background: linear-gradient(160deg,
    rgba(42,157,143,.10) 0%,
    rgba(255,107,157,.05) 60%,
    transparent 100%) !important;
  border-bottom: 1px solid var(--cbrl) !important;
  position: relative !important;
}

.mobile-nav__logo {
  font-family: var(--fh) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--cp) 0%, #40C9BB 45%, var(--ca) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
}

/* Logo image inside mobile nav */
.mobile-nav__logo img {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(42,157,143,.20)) !important;
}

.mobile-nav__close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--cbrl) !important;
  background: var(--cbga) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--cm) !important;
  transition: all .25s cubic-bezier(.34,1.3,.64,1) !important;
  flex-shrink: 0 !important;
}
.mobile-nav__close:hover {
  background: linear-gradient(135deg, var(--cp), var(--ca)) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(42,157,143,.35) !important;
}

/* ── Scrollable body ── */
.mobile-nav__body {
  flex: 1 !important;
  padding: 1.25rem 1.25rem 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.mobile-nav__body::-webkit-scrollbar { display: none !important; }

/* ── Menu items ── */
.mobile-nav__menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
}
.mobile-nav__menu li {
  border-bottom: 1px solid var(--cbrl) !important;
  position: relative !important;
}
.mobile-nav__menu li:last-child { border-bottom: none !important; }

/* Left accent bar on active */
.mobile-nav__menu li.current-menu-item::before {
  content: '' !important;
  position: absolute !important;
  left: -1.25rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 60% !important;
  background: linear-gradient(180deg, var(--cp), var(--ca)) !important;
  border-radius: 0 3px 3px 0 !important;
}

.mobile-nav__menu li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.05rem .5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--cd) !important;
  text-decoration: none !important;
  transition: color .2s, padding-left .22s cubic-bezier(.34,1.2,.64,1) !important;
  letter-spacing: -.015em !important;
}
.mobile-nav__menu li a:hover,
.mobile-nav__menu li.current-menu-item a {
  color: var(--cp) !important;
  padding-left: .875rem !important;
}
.mobile-nav__menu li.current-menu-item a {
  font-weight: 700 !important;
}
.mobile-nav__menu li a svg {
  color: var(--cbrl) !important;
  flex-shrink: 0 !important;
  transition: color .2s, transform .25s cubic-bezier(.34,1.3,.64,1) !important;
  width: 18px !important;
  height: 18px !important;
}
.mobile-nav__menu li a:hover svg,
.mobile-nav__menu li.current-menu-item a svg {
  color: var(--cp) !important;
  transform: translateX(5px) !important;
}

/* ── Search button ── */
.mobile-nav__search-btn {
  display: flex !important;
  align-items: center !important;
  gap: .875rem !important;
  width: 100% !important;
  padding: .875rem 1.1rem !important;
  background: linear-gradient(135deg, rgba(42,157,143,.07) 0%, rgba(255,107,157,.04) 100%) !important;
  border: 1.5px solid rgba(42,157,143,.18) !important;
  border-radius: 16px !important;
  color: var(--cm) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color .22s, background .22s, color .22s, transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .22s !important;
  margin-bottom: 1.1rem !important;
  letter-spacing: -.01em !important;
}
.mobile-nav__search-btn:hover {
  border-color: var(--cp) !important;
  background: linear-gradient(135deg, rgba(42,157,143,.12) 0%, rgba(255,107,157,.07) 100%) !important;
  color: var(--cp) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(42,157,143,.15) !important;
}
.mobile-nav__search-btn svg { flex-shrink: 0 !important; }

/* ── Social icons ── */
.mobile-social {
  display: flex !important;
  gap: .6rem !important;
  flex-wrap: wrap !important;
  margin-top: .5rem !important;
  padding-bottom: 1.25rem !important;
}
.mobile-social a {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: var(--cbga) !important;
  border: 1.5px solid var(--cbrl) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--cm) !important;
  text-decoration: none !important;
  transition: all .25s cubic-bezier(.34,1.3,.64,1) !important;
}
.mobile-social a:hover {
  background: linear-gradient(135deg, var(--cp), var(--ca)) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(42,157,143,.32) !important;
  border-radius: 18px !important;
}

/* ── Footer: auth buttons ── */
.mobile-nav__foot {
  padding: 1.1rem 1.25rem 1.75rem !important;
  border-top: 1px solid var(--cbrl) !important;
  flex-shrink: 0 !important;
  background: linear-gradient(0deg,
    rgba(42,157,143,.06) 0%,
    rgba(255,107,157,.03) 50%,
    transparent 100%) !important;
}
.mobile-nav__auth {
  display: flex !important;
  gap: .625rem !important;
}
.mobile-nav__auth a {
  flex: 1 !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  padding: .65rem 1rem !important;
  transition: all .2s !important;
}
.mobile-nav__auth a.btn--outline {
  border: 1.5px solid var(--cbrl) !important;
  color: var(--cb) !important;
  background: transparent !important;
}
.mobile-nav__auth a.btn--outline:hover {
  border-color: var(--cp) !important;
  color: var(--cp) !important;
  background: var(--cp-bg) !important;
}
.mobile-nav__auth a.btn--primary {
  background: linear-gradient(135deg, var(--cp), var(--cp-h)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(42,157,143,.35) !important;
}
.mobile-nav__auth a.btn--primary:hover {
  background: linear-gradient(135deg, var(--cp-h), var(--cp)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(42,157,143,.45) !important;
}
.mobile-nav__auth > a.btn--outline[href*="my-account"] {
  background: linear-gradient(135deg, rgba(42,157,143,.1), rgba(255,107,157,.08)) !important;
  border-color: rgba(42,157,143,.3) !important;
  color: var(--cp) !important;
}

/* ── 9. Responsive ── */
@media (max-width: 960px) {
  .menu-toggle { display: flex !important; }
  .main-nav { display: none !important; }

  .header-inner {
    display: flex !important;
    grid-template-columns: unset !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Mobile header — আরামদায়ক উচ্চতা, scroll এ বেশি ছোট হবে না */
  .site-header { padding: 1.1rem 0 !important; }
  .site-header.scrolled { padding: .95rem 0 !important; }

  .site-logo {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .header-actions {
    flex-shrink: 0 !important;
    gap: .35rem !important;
  }

  /* ── Mobile: all icons 38px, consistent spacing ── */

  /* Search btn */
  #openSearch {
    background: transparent !important;
    border: none !important;
    width: 38px !important;
    height: 38px !important;
  }
  #openSearch:hover {
    background: rgba(42,157,143,.10) !important;
    border: none !important;
    transform: scale(1.08) !important;
  }
  #openSearch::before { display: none !important; }

  /* All hdr-btn */
  .hdr-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    transition: background .22s, color .22s, transform .22s cubic-bezier(.34,1.3,.64,1) !important;
  }
  .hdr-btn:hover {
    background: rgba(42,157,143,.10) !important;
    color: var(--cp) !important;
    transform: scale(1.08) !important;
  }
  .hdr-btn::before { display: none !important; }

  /* Avatar: circular, 38×38 */
  .hdr-btn--avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    background: linear-gradient(var(--cbg), var(--cbg)) padding-box,
                linear-gradient(135deg, var(--cp), var(--ca)) border-box !important;
    box-shadow: 0 2px 10px rgba(42,157,143,.18) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hdr-btn--avatar:hover {
    transform: scale(1.10) !important;
    box-shadow: 0 0 0 3px rgba(42,157,143,.22), 0 4px 14px rgba(42,157,143,.25) !important;
  }
  .hdr-btn--avatar::before { display: none !important; }
  .hdr-avatar-img, .hdr-btn--avatar img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Menu toggle — same gap as others (.35rem comes from header-actions gap)
     margin-left তুলে দিলাম, gap দিয়েই সমান দূরত্ব হবে */
  .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    margin-left: 0 !important;
  }
  .menu-toggle::before {
    background: rgba(42,157,143,.10) !important;
    border: 1.5px solid rgba(42,157,143,.20) !important;
    border-radius: 14px !important;
  }

  /* Login button hidden on mobile header */
  .header-actions > a.btn--outline { display: none !important; }
  .hdr-btn--avatar { display: flex !important; }

  .search-overlay__top { padding: 1rem 1.25rem !important; }
  .search-overlay__bar { gap: .75rem !important; }
}

@media (max-width: 640px) {
  .site-header { padding: 1rem 0 !important; min-height: 64px !important; }
  .site-header.scrolled { padding: .9rem 0 !important; min-height: 60px !important; }
  .site-logo__text { font-size: 1.25rem !important; }
  .site-logo img.logo-img { height: 32px !important; max-height: 32px !important; }
  .header-actions { gap: .3rem !important; }
  .hdr-btn, .menu-toggle { width: 36px !important; height: 36px !important; }
  .menu-toggle { margin-left: 0 !important; }
  .hdr-btn--avatar { border-radius: 50% !important; }
  #openSearch { width: 36px !important; height: 36px !important; }
}

@media (max-width: 380px) {
  .site-logo__text { font-size: 1.0rem !important; }
  .site-logo img.logo-img { height: 26px !important; max-height: 26px !important; }
  .hdr-btn, .menu-toggle { width: 34px !important; height: 34px !important; }
  .menu-toggle { margin-left: 0 !important; }
  .hdr-btn--avatar { border-radius: 50% !important; }
  #openSearch { width: 32px !important; height: 32px !important; }
  .header-actions { gap: .2rem !important; }
  .dm-pill-track { width: 42px !important; height: 24px !important; }
  .dm-pill-thumb { width: 16px !important; height: 16px !important; }
  .dm-pill-toggle.is-dark .dm-pill-thumb { transform: translateX(18px) !important; }
}

/* ── 10. Dark mode specifics ── */
[data-theme="dark"] .main-nav > ul {
  background: rgba(61,191,176,.06) !important;
  border-color: rgba(61,191,176,.12) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
[data-theme="dark"] .mobile-nav {
  box-shadow: -24px 0 100px rgba(0,0,0,.65), -4px 0 24px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .mobile-nav__head {
  background: linear-gradient(160deg,
    rgba(61,191,176,.10) 0%,
    rgba(255,133,176,.05) 60%,
    transparent 100%) !important;
}
[data-theme="dark"] .mobile-nav__search-btn {
  background: linear-gradient(135deg, rgba(61,191,176,.07) 0%, rgba(255,133,176,.04) 100%) !important;
  border-color: rgba(61,191,176,.18) !important;
}
[data-theme="dark"] .mobile-nav__search-btn:hover {
  background: linear-gradient(135deg, rgba(61,191,176,.13) 0%, rgba(255,133,176,.07) 100%) !important;
  border-color: var(--cp) !important;
}
[data-theme="dark"] .mobile-nav__foot {
  background: linear-gradient(0deg,
    rgba(61,191,176,.07) 0%,
    rgba(255,133,176,.03) 50%,
    transparent 100%) !important;
}

/* Dark mode: mobile auth buttons — Login + Sign Up clearly visible */
[data-theme="dark"] .mobile-nav__auth a.btn--outline {
  border: 1.5px solid rgba(61,191,176,.35) !important;
  color: var(--cp) !important;
  background: rgba(61,191,176,.08) !important;
}
[data-theme="dark"] .mobile-nav__auth a.btn--outline:hover {
  border-color: var(--cp) !important;
  color: #fff !important;
  background: var(--cp) !important;
}
[data-theme="dark"] .mobile-nav__auth a.btn--primary {
  background: linear-gradient(135deg, var(--cp) 0%, var(--cp-h) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(61,191,176,.40) !important;
}
[data-theme="dark"] .mobile-nav__auth > a.btn--outline[href*="my-account"] {
  background: linear-gradient(135deg, rgba(61,191,176,.12), rgba(255,133,176,.08)) !important;
  border-color: rgba(61,191,176,.35) !important;
  color: var(--cp) !important;
}

/* Dark mode: mobile icon buttons — clean, no background on toggle */
@media (max-width: 960px) {
  /* Search: transparent always */
  [data-theme="dark"] #openSearch,
  #openSearch {
    background: transparent !important;
    border: none !important;
  }
  [data-theme="dark"] .hdr-btn {
    background: rgba(61,191,176,.08) !important;
    border-color: rgba(61,191,176,.18) !important;
    color: var(--cd) !important;
  }
  [data-theme="dark"] .hdr-btn:hover {
    background: rgba(61,191,176,.16) !important;
    border-color: rgba(61,191,176,.40) !important;
    color: var(--cp) !important;
  }
  /* Menu toggle: NO background in dark mode — clean, no background on active either */
  [data-theme="dark"] .menu-toggle {
    background: transparent !important;
    border-color: transparent !important;
  }
  [data-theme="dark"] .menu-toggle::before {
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0 !important;
  }
  [data-theme="dark"] .menu-toggle:hover::before {
    background: rgba(61,191,176,.10) !important;
    border-color: rgba(61,191,176,.22) !important;
    opacity: 1 !important;
  }
  [data-theme="dark"] .menu-toggle.active::before {
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0 !important;
  }
  /* Dark pill track */
  [data-theme="dark"] .dm-pill-track {
    background: linear-gradient(135deg, #0d2e2c 0%, #0a2321 100%) !important;
    border-color: rgba(61,191,176,.38) !important;
  }
}

[data-theme="dark"] .site-logo__text {
  color: var(--cd) !important;
}
[data-theme="dark"] .site-logo img.logo-img {
  filter: drop-shadow(0 2px 10px rgba(61,191,176,.22)) brightness(1.05) !important;
}
[data-theme="dark"] .site-logo:hover img.logo-img {
  filter: drop-shadow(0 4px 20px rgba(61,191,176,.38)) brightness(1.1) !important;
}
[data-theme="dark"] .hdr-btn--avatar {
  background: linear-gradient(var(--cbg), var(--cbg)) padding-box,
              linear-gradient(135deg, var(--cp), var(--ca)) border-box !important;
  box-shadow: 0 2px 12px rgba(61,191,176,.18) !important;
}
[data-theme="dark"] .main-nav a:hover {
  color: var(--cp) !important;
}
[data-theme="dark"] .main-nav .current-menu-item > a,
[data-theme="dark"] .main-nav .current_page_item > a {
  box-shadow: 0 4px 18px rgba(61,191,176,.40) !important;
}

/* Desktop login hover fix — text always visible over bg */
.header-actions > a.btn--outline {
  z-index: 1 !important;
}
.header-actions > a.btn--outline > * {
  position: relative !important;
  z-index: 2 !important;
}
.header-actions > a.btn--outline {
  isolation: isolate !important;
  color: var(--cp) !important;
}
.header-actions > a.btn--outline:hover {
  color: #fff !important;
}
[data-theme="dark"] .header-actions > a.btn--outline {
  border-color: rgba(61,191,176,.35) !important;
  color: var(--cp) !important;
  background: rgba(61,191,176,.08) !important;
}
[data-theme="dark"] .header-actions > a.btn--outline:hover {
  color: #fff !important;
  border-color: var(--cp) !important;
  background: var(--cp) !important;
  box-shadow: 0 4px 20px rgba(61,191,176,.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RANK MATH FAQ — Meowdoor Theme (Accordion Design)
   Rank Math HTML:
     .rank-math-list               → wrapper
       .rank-math-list-item        → each card
         h3.rank-math-question     → question (Rank Math toggles aria-expanded)
         div.rank-math-answer      → answer panel
   Rank Math plugin JS controls open/close via aria-expanded.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset: undo .post-content h3 overrides inside FAQ ── */
.post-content .rank-math-list h3.rank-math-question,
.rank-math-list h3.rank-math-question {
  font-size:      1rem    !important;
  font-weight:    600     !important;
  font-family:    'DM Sans', system-ui, sans-serif !important;
  margin-top:     0       !important;
  margin-bottom:  0       !important;
  padding-top:    0       !important;
  padding-bottom: 0       !important;
  border-top:     none    !important;
  border-bottom:  none    !important;
  line-height:    1.55    !important;
  letter-spacing: -.01em  !important;
  color:          var(--cd, #1A2E2C) !important;
}

/* ── Wrapper ── */
.rank-math-list {
  margin:     2.5rem 0    !important;
  padding:    0           !important;
  background: transparent !important;
  border:     none        !important;
}

/* ── Section heading via ::before ── */
.rank-math-list::before { content: none !important; display: none !important; }

/* ── JS-injected FAQ title ── */
.rm-faq-title {
  display:        flex !important;
  align-items:    center !important;
  gap:            .5rem !important;
  font-family:    'DM Sans', system-ui, sans-serif !important;
  font-size:      1.35rem !important;
  font-weight:    700 !important;
  color:          var(--cd, #1A2E2C) !important;
  letter-spacing: -.02em !important;
  margin-bottom:  1rem !important;
  padding-bottom: .875rem !important;
  border-bottom:  2px solid var(--cbrl, #D0EDEA) !important;
  line-height:    1.3 !important;
}
.rm-faq-icon {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px !important;
  height:          32px !important;
  border-radius:   50% !important;
  background:      var(--cp-bg, rgba(42,157,143,.12)) !important;
  color:           var(--cp, #2A9D8F) !important;
  font-size:       1.1rem !important;
  font-weight:     800 !important;
  flex-shrink:     0 !important;
}

/* ── Each card ── */
.rank-math-list .rank-math-list-item {
  background:    var(--ccard, #fff) !important;
  border:        1.5px solid var(--cbrl, #D0EDEA) !important;
  border-radius: 10px !important;
  margin-bottom: .5rem !important;
  overflow:      hidden !important;
  transition:    border-color .2s, box-shadow .2s !important;
  box-shadow:    0 1px 3px rgba(42,157,143,.05) !important;
}
.rank-math-list .rank-math-list-item:last-child { margin-bottom: 0 !important; }
.rank-math-list .rank-math-list-item:hover {
  border-color: rgba(42,157,143,.4) !important;
  box-shadow:   0 3px 14px rgba(42,157,143,.09) !important;
}

/* ── Question row ── */
.rank-math-list .rank-math-list-item > h3.rank-math-question {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             .875rem !important;
  padding:         1rem 1.25rem !important;
  cursor:          pointer !important;
  width:           100% !important;
  box-sizing:      border-box !important;
  transition:      color .18s, background .2s !important;
}

/* ── Chevron icon ── */
.rank-math-list .rank-math-list-item > h3.rank-math-question::after {
  content:             '' !important;
  flex-shrink:         0 !important;
  width:               26px !important;
  height:              26px !important;
  min-width:           26px !important;
  border-radius:       50% !important;
  background-color:    rgba(42,157,143,.12) !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%232A9D8F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  background-size:     13px 13px !important;
  border:              1.5px solid rgba(42,157,143,.18) !important;
  transition:          transform .3s ease, background-color .2s !important;
}

/* ── Open state (aria-expanded="true" set by Rank Math JS) ── */
.rank-math-list .rank-math-list-item > h3.rank-math-question[aria-expanded="true"] {
  color:         var(--cp, #2A9D8F) !important;
  background:    rgba(42,157,143,.05) !important;
  border-bottom: 1px solid rgba(42,157,143,.14) !important;
}
.rank-math-list .rank-math-list-item > h3.rank-math-question[aria-expanded="true"]::after {
  transform:        rotate(180deg) !important;
  background-color: var(--cp, #2A9D8F) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  border-color:     transparent !important;
}

/* card border highlight when open */
.rank-math-list .rank-math-list-item:has(> h3.rank-math-question[aria-expanded="true"]) {
  border-color: var(--cp, #2A9D8F) !important;
  border-left:  3px solid var(--cp, #2A9D8F) !important;
  box-shadow:   0 4px 20px rgba(42,157,143,.11) !important;
}

/* ── Answer panel — hidden by default, shown when question is open ── */
.rank-math-list .rank-math-list-item > div.rank-math-answer {
  /* closed state */
  display:       none !important;
  padding:       1rem 1.25rem 1.25rem !important;
  font-family:   'DM Sans', system-ui, sans-serif !important;
  font-size:     .9375rem !important;
  line-height:   1.85 !important;
  color:         var(--cb, #3D4F4D) !important;
  background:    rgba(42,157,143,.025) !important;
  border-top:    1px solid rgba(42,157,143,.12) !important;
  box-sizing:    border-box !important;
  overflow-wrap: break-word !important;
}
/* open state — when sibling question has aria-expanded=true */
.rank-math-list .rank-math-list-item:has(> h3.rank-math-question[aria-expanded="true"]) > div.rank-math-answer {
  display: block !important;
}
.rank-math-list .rank-math-list-item > div.rank-math-answer p {
  margin-bottom: .625rem !important;
  color: var(--cb, #3D4F4D) !important;
}
.rank-math-list .rank-math-list-item > div.rank-math-answer p:last-child { margin-bottom: 0 !important; }
.rank-math-list .rank-math-list-item > div.rank-math-answer a {
  color: var(--cp, #2A9D8F) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}
.rank-math-list .rank-math-list-item > div.rank-math-answer strong {
  font-weight: 700 !important;
  color: var(--cd, #1A2E2C) !important;
}

/* ════ DARK MODE ════ */
[data-theme="dark"] .rank-math-list::before { content: none !important; }
[data-theme="dark"] .rm-faq-title {
  color:        var(--cd, #E8F7F5) !important;
  border-color: rgba(61,191,176,.2) !important;
}
[data-theme="dark"] .rm-faq-icon {
  background: rgba(61,191,176,.14) !important;
  color:      var(--cp, #3DBFB0) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item {
  background:   var(--ccard, #122927) !important;
  border-color: rgba(61,191,176,.14) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item:hover {
  border-color: rgba(61,191,176,.38) !important;
  box-shadow:   0 3px 16px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item > h3.rank-math-question {
  color: var(--cd, #E8F7F5) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item > h3.rank-math-question::after {
  background-color: rgba(61,191,176,.14) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%233DBFB0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  border-color: rgba(61,191,176,.22) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item > h3.rank-math-question[aria-expanded="true"] {
  color:      var(--cp, #3DBFB0) !important;
  background: rgba(61,191,176,.07) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item > h3.rank-math-question[aria-expanded="true"]::after {
  background-color: var(--cp, #3DBFB0) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%230E2422' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item:has(> h3.rank-math-question[aria-expanded="true"]) {
  border-color: var(--cp, #3DBFB0) !important;
  border-left:  3px solid var(--cp, #3DBFB0) !important;
  box-shadow:   0 4px 20px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item > div.rank-math-answer {
  background:   rgba(61,191,176,.04) !important;
  color:        var(--cb, #B0D0CC) !important;
  border-color: rgba(61,191,176,.12) !important;
}
[data-theme="dark"] .rank-math-list .rank-math-list-item > div.rank-math-answer p { color: var(--cb, #B0D0CC) !important; }
[data-theme="dark"] .rank-math-list .rank-math-list-item > div.rank-math-answer strong { color: var(--cd, #E8F7F5) !important; }
[data-theme="dark"] .rank-math-list .rank-math-list-item > div.rank-math-answer a { color: var(--cp, #3DBFB0) !important; }

/* ════ MOBILE ════ */
@media (max-width: 640px) {
  .rank-math-list { margin: 1.75rem 0 !important; }
  .rm-faq-title { font-size: 1.15rem !important; }
  .rank-math-list .rank-math-list-item > h3.rank-math-question {
    padding:   .875rem 1rem !important;
    font-size: .9rem !important;
    gap:       .75rem !important;
  }
  .rank-math-list .rank-math-list-item > h3.rank-math-question::after {
    width: 24px !important; height: 24px !important; min-width: 24px !important;
  }
  .rank-math-list .rank-math-list-item > div.rank-math-answer {
    padding:   .875rem 1rem 1.125rem !important;
    font-size: .9rem !important;
  }
}

/* ── overflow safety ── */
.rank-math-list * { max-width: 100% !important; box-sizing: border-box !important; }
.rank-math-list img { height: auto !important; width: 100% !important; }