/**
 * CSS Bundle: modules
 * Generated: 2026-05-31 11:36:04
 * Files: 7
 * Signature: 72200fb4b1d9a4dfb965a1676146509cfe2126d1
 */

/* === frontend-idle-modal.css === */
#hd-idle-modal{display:flex;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility 0s linear .3s;position:fixed!important;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.6)!important;z-index:100000!important;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;pointer-events:none}
#hd-idle-modal.is-visible{visibility:visible;opacity:1;transition:opacity .3s ease-in-out;pointer-events:auto}
.hd-idle-modal-content{position:relative;background-color:#fff!important;color:#333!important;padding:25px!important;border-radius:12px!important;box-shadow:0 8px 24px rgba(0,0,0,.2)!important;text-align:left!important;transform:translateY(20px);transition:transform .3s ease-in-out,max-width .3s ease-in-out;max-height:92vh;display:flex;flex-direction:column;width:auto!important;box-sizing:border-box;margin-bottom:20px}
#hd-idle-modal.has-3-columns .hd-idle-modal-content{max-width:1100px;width:100%!important}
#hd-idle-modal.has-2-columns .hd-idle-modal-content{max-width:760px;width:100%!important}
#hd-idle-modal.has-1-column .hd-idle-modal-content{min-width:300px;max-width:100%!important}
.hd-modal-close-x{
position:absolute;
top:20px;
right:20px;
width:32px;
height:32px;
border:none;
font-size:28px;
line-height:1;
cursor:pointer;
color:#aaa;
transition:color .2s ease,transform .2s ease;
background: #898989;
color: white;
display: flex;
border-radius: 50%;
align-items: center;
justify-content: center;
/* [FIX] Reset min-dimensions to prevent CLS Prevention from making it oval */
min-width: 32px;
min-height: 32px;
}
.hd-modal-close-x:hover{color:#fff;transform:rotate(90deg)}
.hd-idle-modal-header{text-align:center;margin-bottom:20px;flex-shrink:0}
.hd-idle-modal-header h2{margin:0 0 5px 0;font-size:24px}
.hd-idle-modal-header p{margin:0;color:#666}
.hd-idle-modal-main-wrapper{display:flex;flex-wrap:nowrap;gap:20px;overflow:hidden;flex-grow:1;max-width:100%}
.hd-idle-modal-left-wrapper,.hd-idle-modal-middle-wrapper,.hd-idle-modal-right-wrapper{flex:1;min-width:0;overflow-y:auto;padding:0 12px;box-sizing:border-box;margin-bottom:20px}
.hd-idle-modal-left-wrapper:not(:last-child),.hd-idle-modal-middle-wrapper:not(:last-child){border-right:1px solid #eee}
.hd-idle-modal-left-wrapper h4,.hd-idle-modal-middle-wrapper h4,.hd-idle-modal-right-wrapper h4,.hd-idle-modal-middle-wrapper .widget-title,.hd-idle-modal-right-wrapper .widget-title{margin-top:0;color:#333;font-size:18px;border-bottom:1px solid #eee;padding-bottom:10px;margin-bottom:15px}
.hd-idle-modal-posts{margin:0!important;text-align:left!important;list-style:none;padding:0}
.hd-idle-modal-post{display:flex!important;align-items:center!important;gap:14px!important;margin-bottom:0px!important;padding:15px!important;border-bottom:1px solid #eee!important;text-decoration:none!important;color:#333!important;border-radius:4px;transition:background-color .2s ease!important}
.hd-idle-modal-post:hover{background-color:#f9f9f9!important}
.hd-idle-modal-post:last-child{border-bottom:none!important;margin-bottom:0!important}
.hd-idle-modal-post > picture{display:block!important;width:84px!important;height:84px!important;flex:0 0 84px!important;overflow:hidden!important;border-radius:8px!important;background:#eef2f5!important}
.hd-idle-modal-post > picture > picture{display:contents!important}
.hd-idle-modal-post img{width:84px!important;height:84px!important;object-fit:cover!important;margin-right:0!important;border-radius:8px!important;flex-shrink:0!important;display:block!important}
.hd-idle-modal-post > picture img{width:100%!important;height:100%!important;margin:0!important;border-radius:0!important}
.hd-idle-modal-post-title{font-size:1rem;font-weight:500;line-height:1.4;flex:1;min-width:0}
.hd-idle-modal-footer{text-align:center;padding-top:20px;flex-shrink:0}
#hd-idle-modal-close{padding:10px 30px!important;background-color:#007bff!important;color:#fff!important;border:none!important;border-radius:8px!important;cursor:pointer!important;font-size:16px!important;transition:background-color .2s ease!important}
#hd-idle-modal-close:hover{background-color:#0056b3!important}
.hd-idle-modal-posts.is-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:0 12px;width:100%;box-sizing:border-box}
.hd-idle-modal-footer.hidden{display:none!important}
.hd-idle-modal-footer{border-top:1px solid #e0e0e0}
.hd-idle-modal-post.is-card-layout{display:flex!important;flex-direction:column!important;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;margin-bottom:0!important;padding:0!important;box-shadow:0 2px 8px rgba(0,0,0,0.1);width:100%}
.hd-idle-modal-post.is-card-layout .hd-card-image-wrapper{position:relative;width:100%;padding-top:56.25%;background:#e9ecef;overflow:hidden}
.hd-idle-modal-post.is-card-layout .hd-card-image-wrapper picture{position:absolute;inset:0;width:100%!important;height:100%!important;display:block!important}
.hd-idle-modal-post.is-card-layout .hd-card-image-wrapper picture picture{display:contents!important}
.hd-idle-modal-post.is-card-layout img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;object-fit:cover;object-position:center;margin:0!important;border-radius:0!important}
.hd-idle-modal-post.is-card-layout .hd-card-category{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.7);color:#fff;padding:3px 8px;font-size:11px;border-radius:3px;z-index:2}
.hd-idle-modal-post.is-card-layout .hd-card-content{padding:12px}
.hd-idle-modal-post.is-card-layout .hd-idle-modal-post-title{font-size:1rem;font-weight:bold;line-height:1.4;margin:0 0 8px}
.hd-idle-modal-post.is-card-layout .hd-card-author{font-size:12px;color:#666;margin-top:4px}
.hd-modal-readmore-wrapper{text-align:center;margin-top:20px;padding:0 12px}
.hd-modal-readmore-button{display:inline-block;padding:10px 25px;color:#000!important;font-size:1rem;font-weight:bold;border:1px solid;border-radius:10px;transition:background-color .2s ease;text-decoration:none!important}
.hd-modal-readmore-button:hover{background-color:#f1f1f1}
.hd-idle-modal-bottom-wrapper{flex-shrink:0;width:100%;box-sizing:border-box;margin-top:10px;padding-top:10px;border-top:1px solid #e0e0e0;overflow-y:auto;max-height:25vh}
@media (max-width:960px){
.hd-idle-modal-content{width:95%!important;max-width:none!important;min-width:0!important}
.hd-idle-modal-main-wrapper{flex-wrap:wrap;overflow-y:auto;max-width:100%}
.hd-idle-modal-left-wrapper,.hd-idle-modal-middle-wrapper,.hd-idle-modal-right-wrapper{flex-basis:100%;border-right:0!important;padding:0;margin-bottom:20px}
.hd-idle-modal-left-wrapper:last-child,.hd-idle-modal-middle-wrapper:last-child,.hd-idle-modal-right-wrapper:last-child{margin-bottom:0}
.hd-idle-modal-post{gap:12px!important}
.hd-idle-modal-post > picture{width:74px!important;height:74px!important;flex-basis:74px!important}
.hd-idle-modal-post img{width:74px!important;height:74px!important}
.hd-idle-modal-posts.is-card-grid{min-width:100%;max-width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hd-idle-modal-post.is-card-layout{display:flex!important;flex-direction:row!important;align-items:center!important;margin-bottom:15px!important;padding-bottom:15px!important;border-bottom:1px solid #eee!important;border:none;border-radius:4px;box-shadow:none;background:transparent}
.hd-idle-modal-post.is-card-layout:last-child{border-bottom:none!important;margin-bottom:0!important}
.hd-idle-modal-post.is-card-layout .hd-card-image-wrapper{width:74px!important;height:74px!important;padding-top:0;flex:0 0 74px!important;margin-right:0!important;overflow:hidden}
.hd-idle-modal-post.is-card-layout img{width:100%!important;height:100%!important;border-radius:8px!important;object-fit:cover;object-position:center}
.hd-idle-modal-post.is-card-layout .hd-card-category{display:none}
.hd-idle-modal-post.is-card-layout .hd-card-content{padding:0;flex-grow:1}
.hd-idle-modal-post.is-card-layout .hd-idle-modal-post-title{font-size:1rem;margin:0}
.hd-idle-modal-post.is-card-layout .hd-card-author{display:none}
.hd-modal-readmore-wrapper{padding:0}
}

/* Stable list media: keep image/text spacing readable when picture wrappers are rewritten by image optimizers. */
.hd-idle-modal-post{gap:16px!important;box-sizing:border-box;min-width:0}
.hd-idle-modal-post > picture,.hd-idle-modal-post > img{width:88px!important;height:88px!important;flex:0 0 88px!important;aspect-ratio:1/1!important;overflow:hidden!important;border-radius:8px!important;background:#eef2f5!important}
.hd-idle-modal-post > picture img,.hd-idle-modal-post > img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;margin:0!important}
.hd-idle-modal-post-title{min-width:0;overflow-wrap:anywhere}
@media (max-width:960px){.hd-idle-modal-post{gap:14px!important}.hd-idle-modal-post > picture,.hd-idle-modal-post > img{width:80px!important;height:80px!important;flex-basis:80px!important}.hd-idle-modal-post.is-card-layout .hd-card-image-wrapper{width:80px!important;height:80px!important;flex-basis:80px!important}.hd-idle-modal-post.is-card-layout .hd-card-content{min-width:0}}


/* === frontend-modules.css === */
/* Basic Styling for Feature Content Module */
.module-feature-content {
    margin-bottom: 40px;
    padding: 0 20px;
}

.feature-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.feature-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.feature-content-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-content-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-content-card .card-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f0f0f1;
}

.feature-content-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.feature-content-card:hover .card-image img {
    transform: scale(1.05);
}

.feature-content-card .card-content {
    padding: 15px;
}

.feature-content-card .card-title {
    font-size: 1.1em;
    margin: 0 0 8px;
    line-height: 1.4;
    color: #333;
}

.feature-content-card .card-meta {
    font-size: 0.85em;
    color: #888;
}


/* === frontend-popular-posts.css === */
/* --- Super Module: Popular Posts Ranking Styles --- */
.hd-popular-posts-page {
  display: block;
}

.hd-popular-posts-page__items--list {
  display: grid;
  gap: 18px;
}

.hd-popular-posts-page__items--list .hd-popular-posts-list__item {
  margin: 0;
}

.hd-popular-posts-page__items--card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.hd-popular-posts-card {
  height: 100%;
}

.hd-popular-posts-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hd-popular-posts-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.18);
}

.popular-content-section.popular-content-section--disable-hover-underline a,
.popular-content-section.popular-content-section--disable-hover-underline a:hover,
.popular-content-section.popular-content-section--disable-hover-underline a:focus,
.popular-content-section.popular-content-section--disable-hover-underline a:focus-visible,
.popular-content-section[data-popular-disable-hover-underline="1"] a,
.popular-content-section[data-popular-disable-hover-underline="1"] a:hover,
.popular-content-section[data-popular-disable-hover-underline="1"] a:focus,
.popular-content-section[data-popular-disable-hover-underline="1"] a:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.popular-content-section.popular-content-section--disable-hover-underline a:hover *,
.popular-content-section.popular-content-section--disable-hover-underline a:focus *,
.popular-content-section.popular-content-section--disable-hover-underline .ranking-link:hover .ranking-post-title,
.popular-content-section.popular-content-section--disable-hover-underline .list-item-link:hover .list-item-text,
.popular-content-section.popular-content-section--disable-hover-underline .design-image-featured a:hover .featured-title-on-image,
.popular-content-section.popular-content-section--disable-hover-underline .hd-popular-posts-card__link:hover .hd-popular-posts-card__title,
.popular-content-section[data-popular-disable-hover-underline="1"] a:hover *,
.popular-content-section[data-popular-disable-hover-underline="1"] a:focus *,
.popular-content-section[data-popular-disable-hover-underline="1"] .ranking-link:hover .ranking-post-title,
.popular-content-section[data-popular-disable-hover-underline="1"] .list-item-link:hover .list-item-text,
.popular-content-section[data-popular-disable-hover-underline="1"] .design-image-featured a:hover .featured-title-on-image,
.popular-content-section[data-popular-disable-hover-underline="1"] .hd-popular-posts-card__link:hover .hd-popular-posts-card__title {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.hd-popular-posts-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.hd-popular-posts-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hd-popular-posts-card__image--placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.18)),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 12px, rgba(255, 255, 255, 0.2) 12px 24px);
}

.hd-popular-posts-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
}

.hd-popular-posts-card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #111827;
}

.hd-popular-posts-card__meta {
  margin-top: auto;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #64748b;
}

body.fc-dark-mode .hd-popular-posts-card__link,
body.hd-dark-mode .hd-popular-posts-card__link,
body.dark-mode .hd-popular-posts-card__link {
  background: #20242a;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

body.fc-dark-mode .hd-popular-posts-card__title,
body.hd-dark-mode .hd-popular-posts-card__title,
body.dark-mode .hd-popular-posts-card__title {
  color: #f8fafc;
}

body.fc-dark-mode .hd-popular-posts-card__meta,
body.hd-dark-mode .hd-popular-posts-card__meta,
body.dark-mode .hd-popular-posts-card__meta {
  color: #cbd5e1;
}

.custom-popular-posts-widget .custom-tab-panel {
  display: none;
}

.custom-popular-posts-widget .custom-tab-panel.is-active {
  display: block;
}

.my-pp li.my-pp__item--editorial-card,
.my-pp__item--editorial-card {
  float: none;
  clear: both;
  overflow: visible;
  margin: 0 0 16px;
  list-style: none;
}

.my-pp li.my-pp__item--editorial-card .my-pp__editorial-card,
.my-pp__editorial-card {
  display: grid !important;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: #ffffff;
  color: inherit;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.my-pp li.my-pp__item--editorial-card .my-pp__editorial-title,
.my-pp__editorial-title {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  color: #111827;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

.my-pp li.my-pp__item--editorial-card .my-pp__editorial-media,
.my-pp__editorial-media {
  float: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0;
  border-radius: 13px;
  background: #f1f5f9;
}

.my-pp__editorial-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-pp__editorial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.my-pp__editorial-excerpt {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.7;
}

body.fc-dark-mode .my-pp__editorial-card,
body.hd-dark-mode .my-pp__editorial-card,
body.dark-mode .my-pp__editorial-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: #1f2937;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

body.fc-dark-mode .my-pp__editorial-title,
body.hd-dark-mode .my-pp__editorial-title,
body.dark-mode .my-pp__editorial-title {
  color: #f8fafc;
}

body.fc-dark-mode .my-pp__editorial-meta,
body.hd-dark-mode .my-pp__editorial-meta,
body.dark-mode .my-pp__editorial-meta,
body.fc-dark-mode .my-pp__editorial-excerpt,
body.hd-dark-mode .my-pp__editorial-excerpt,
body.dark-mode .my-pp__editorial-excerpt {
  color: #cbd5e1;
}

.comprehensive-article-widget--disable-hover-underline a:hover,
.comprehensive-article-widget--disable-hover-underline a:focus,
.comprehensive-article-widget--disable-hover-underline a:hover *,
.comprehensive-article-widget--disable-hover-underline a:focus *,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:hover,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:focus,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:hover *,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:focus * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.comprehensive-article-widget--disable-hover-underline .my-pp li a:hover .text,
.comprehensive-article-widget--disable-hover-underline .my-pp li a:focus .text,
.comprehensive-article-widget--disable-hover-underline .my-ppop li a:hover .text,
.comprehensive-article-widget--disable-hover-underline .my-ppop li a:focus .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-pp li a:hover .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-pp li a:focus .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-ppop li a:hover .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-ppop li a:focus .text {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget,
.custom-popular-posts-widget {
  --hd-comprehensive-list-thumb-width: 150px;
  --hd-comprehensive-list-thumb-ratio: 3 / 2;
  --hd-comprehensive-list-title-color: #111827;
  --hd-comprehensive-list-title-hover-color: #0f172a;
  --hd-comprehensive-list-title-size: 0.96rem;
  --hd-comprehensive-list-title-line-height: 1.55;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp,
.custom-popular-posts-widget .my-pp {
  display: grid;
  gap: 10px;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp li,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp li,
.custom-popular-posts-widget .my-pp li {
  float: none;
  clear: both;
  margin: 0;
  overflow: visible;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp li a,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp li a,
.custom-popular-posts-widget .my-pp li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  color: var(--hd-comprehensive-list-title-color);
  text-decoration: none;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp .thumb,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp .thumb,
.custom-popular-posts-widget .my-pp .thumb {
  flex: 0 0 var(--hd-comprehensive-list-thumb-width);
  float: none;
  width: var(--hd-comprehensive-list-thumb-width);
  max-width: 38%;
  min-height: 0;
  aspect-ratio: var(--hd-comprehensive-list-thumb-ratio);
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: #f3f4f6;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp .thumb picture,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp .thumb picture,
.custom-popular-posts-widget .my-pp .thumb picture,
.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp .thumb img,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp .thumb img,
.custom-popular-posts-widget .my-pp .thumb img {
  display: block;
  width: 100%;
  height: 100%;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp .thumb img,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp .thumb img,
.custom-popular-posts-widget .my-pp .thumb img {
  object-fit: cover;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp li .text,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp li .text,
.custom-popular-posts-widget .my-pp li .text {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--hd-comprehensive-list-title-color);
  font-size: var(--hd-comprehensive-list-title-size);
  font-weight: 600;
  line-height: var(--hd-comprehensive-list-title-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp li a:hover .text,
.widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp li a:focus .text,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp li a:hover .text,
.tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp li a:focus .text,
.custom-popular-posts-widget .my-pp li a:hover .text,
.custom-popular-posts-widget .my-pp li a:focus .text {
  color: var(--hd-comprehensive-list-title-hover-color);
}

body.fc-dark-mode .widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget,
body.hd-dark-mode .widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget,
body.dark-mode .widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget,
body.fc-dark-mode .tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget,
body.hd-dark-mode .tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget,
body.dark-mode .tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget,
body.fc-dark-mode .custom-popular-posts-widget,
body.hd-dark-mode .custom-popular-posts-widget,
body.dark-mode .custom-popular-posts-widget {
  --hd-comprehensive-list-title-color: #f8fafc;
  --hd-comprehensive-list-title-hover-color: #ffffff;
}

@media (max-width: 575px) {
  .widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget,
  .tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget,
  .custom-popular-posts-widget {
    --hd-comprehensive-list-thumb-width: 132px;
    --hd-comprehensive-list-title-size: 0.94rem;
  }

  .widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget .my-pp .thumb,
  .tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget .my-pp .thumb,
  .custom-popular-posts-widget .my-pp .thumb {
    max-width: 42%;
  }
}

@media (max-width: 420px) {
  .widget-area-wrapper[data-cls-widget-area] .widget_comprehensive_article_widget,
  .tabs-with-sidebar-container .latest-section .widget_comprehensive_article_widget,
  .custom-popular-posts-widget {
    --hd-comprehensive-list-thumb-width: 118px;
    --hd-comprehensive-list-title-size: 0.92rem;
  }
}

.postcard_thumbnail ,
.my-pp .thumb {
  position: relative;
  overflow: hidden;
}

.popular-rank {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  z-index: 10;
  border-bottom-right-radius: 10px; /* 右下角圓角 */
}

/* 第一名顏色 */
.popular-rank.rank-1 {
  background-color: #ffd700; /* 金色 */
}

/* 第二名顏色 */
.popular-rank.rank-2 {
  background-color: #c0c0c0; /* 銀色 */
}

/* 第三名顏色 */
.popular-rank.rank-3 {
  background-color: #cd7f32; /* 銅色 */
}

/* 4-10 名顏色 */
.popular-rank.rank-default {
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
}

/* =============================================================================
   Popular Ranking Item Layouts
   ============================================================================= */

/* Layout: Top Image (上圖下文) */
.ranking-list.layout-top-image .ranking-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
}

.ranking-list.layout-top-image .ranking-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  width: 100%;
}

.ranking-list.layout-top-image .ranking-thumbnail {
  order: -1;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 15px;
  height: 180px; /* Fixed height for consistency */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 4px;
}

.ranking-list.layout-top-image .ranking-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px; /* Ensure image curvature matches container */
}

.ranking-list.layout-top-image .ranking-content {
  width: 100%;
  padding: 0 5px; /* Slight padding alignment */
}

/* Adjust Ranking Number Position for Top Image Layout */
.ranking-list.layout-top-image .ranking-number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  border-radius: 4px 0 4px 0; /* Adjust radius */
  /* Ensure it sits on top of the image */
}

/* Mobile Adjustments for Top Image */
@media (max-width: 767px) {
  .hd-popular-posts-page__items--card {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hd-popular-posts-card__body {
    padding: 16px;
  }

  .ranking-list.layout-top-image .ranking-thumbnail {
    height: 160px;
  }
}


/* === bookmark-style.css === */
/**
 * HD Bookmark Styles
 */

.hd-bookmark-theme-current,
.hd-bookmark-container {
--hd-bookmark-accent: var(--hd-bookmark-color, #e11d48);
--hd-bookmark-accent-soft: rgba(225, 29, 72, 0.08);
--hd-bookmark-accent-ring: rgba(225, 29, 72, 0.24);
--hd-bookmark-surface: #fff;
--hd-bookmark-surface-muted: #f8fafc;
--hd-bookmark-border: rgba(226, 232, 240, 0.92);
--hd-bookmark-ink: #0f172a;
--hd-bookmark-muted: #64748b;
--hd-bookmark-radius: 18px;
--hd-bookmark-radius-lg: 28px;
--hd-bookmark-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

/* ===== Bookmark Button ===== */
.hd-bookmark-wrapper {
margin: 1.5rem 0;
display: flex;
justify-content: center;
}

.hd-bookmark-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: 2px solid var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
border-radius: 50px;
background: var(--hd-btn-bg, transparent);
color: var(--hd-text-color, var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)));
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.hd-bookmark-btn:hover {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
color: #fff;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.hd-bookmark-btn:focus-visible,
.hd-bookmark-collection-link:focus-visible,
.hd-bookmark-remove:focus-visible {
outline: 3px solid var(--hd-bookmark-accent-ring, rgba(225, 29, 72, 0.24));
outline-offset: 3px;
}

.hd-bookmark-btn.is-processing,
.hd-bookmark-btn[aria-busy="true"] {
opacity: 0.62;
cursor: wait;
pointer-events: none;
}

.hd-bookmark-btn:disabled,
.hd-bookmark-btn.is-disabled,
.hd-bookmark-btn[aria-disabled="true"] {
opacity: 0.48;
cursor: not-allowed;
pointer-events: none;
}

.hd-bookmark-btn.is-error,
.hd-bookmark-remove.is-error {
border-color: #dc2626;
background: rgba(220, 38, 38, 0.1);
color: #b91c1c;
}

.hd-bookmark-btn.is-bookmarked {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
color: #fff;
}

.hd-bookmark-btn.is-bookmarked:hover {
background: transparent;
color: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
}

.hd-bookmark-icon {
display: flex;
align-items: center;
justify-content: center;
}

.hd-bookmark-icon svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}

.hd-bookmark-btn.is-bookmarked .hd-bookmark-icon svg {
fill: currentColor;
}

.hd-bookmark-btn:hover .hd-bookmark-icon svg {
transform: scale(1.1);
}

.hd-bookmark-btn.is-processing .hd-bookmark-icon svg {
animation: hd-bookmark-soft-pulse 0.85s ease-in-out infinite;
}

@keyframes hd-bookmark-soft-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(0.86);
}
}

/* ===== Size Variants ===== */
/* Small */
.hd-bookmark-wrapper.size-small .hd-bookmark-btn,
.hd-bookmark-collection-link.size-small {
padding: 6px 12px;
font-size: 12px;
gap: 4px;
}
.hd-bookmark-wrapper.size-small .hd-bookmark-icon svg,
.hd-bookmark-collection-link.size-small svg {
width: 14px;
height: 14px;
}

/* Medium (default) */
.hd-bookmark-wrapper.size-medium .hd-bookmark-btn,
.hd-bookmark-collection-link.size-medium {
padding: 10px 20px;
font-size: 14px;
gap: 6px;
}
.hd-bookmark-wrapper.size-medium .hd-bookmark-icon svg,
.hd-bookmark-collection-link.size-medium svg {
width: 18px;
height: 18px;
}

/* Large */
.hd-bookmark-wrapper.size-large .hd-bookmark-btn,
.hd-bookmark-collection-link.size-large {
padding: 14px 28px;
font-size: 16px;
gap: 8px;
}
.hd-bookmark-wrapper.size-large .hd-bookmark-icon svg,
.hd-bookmark-collection-link.size-large svg {
width: 22px;
height: 22px;
}

/* ===== Prefix Text & Background Wrapper ===== */
.hd-bookmark-prefix-wrapper {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}

.hd-bookmark-prefix-text {
color: var(--hd-prefix-color, var(--hd-text-color, var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48))));
font-size: 14px;
font-weight: 500;
}

.hd-bookmark-prefix-separator {
display: inline-block;
margin: 0 8px;
}

.hd-bookmark-prefix-separator--line {
opacity: .5;
}

.hd-bookmark-prefix-separator--colon {
margin-left: 0;
}

/* With Background */
.hd-bookmark-prefix-wrapper.has-background {
background: var(--hd-bookmark-bg, var(--hd-bookmark-accent-soft, rgba(225, 29, 72, 0.08)));
padding: 16px 24px;
border-radius: 12px;
margin: 1.5rem 0;
}

.hd-bookmark-prefix-wrapper.has-background .hd-bookmark-wrapper {
margin: 0;
}

/* ===== Collection Link ===== */
.hd-bookmark-collection-link,
#si-single-content .hd-bookmark-collection-link,
.entry-content .hd-bookmark-collection-link,
a.hd-bookmark-collection-link {
display: inline-flex;
align-items: center;
box-sizing: border-box;
gap: 8px;
padding: 12px 24px;
border: 2px solid var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
border-radius: 50px;
background: var(--hd-btn-bg, transparent);
color: var(--hd-text-color, var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48))) ;
font-size: 16px;
font-weight: 500;
line-height: 1.25;
min-height: 48px;
text-decoration: none ;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.hd-bookmark-collection-link:hover,
#si-single-content .hd-bookmark-collection-link:hover,
.entry-content .hd-bookmark-collection-link:hover,
a.hd-bookmark-collection-link:hover {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
color: #fff ;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.hd-bookmark-collection-link svg {
display: block;
flex: 0 0 auto;
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}

.hd-bookmark-collection-link:hover svg {
transform: scale(1.1);
}

/* ===== Size Classes ===== */
/* Small Size */
.hd-bookmark-wrapper.size-small .hd-bookmark-btn,
.size-small.hd-bookmark-collection-link,
#si-single-content .size-small.hd-bookmark-collection-link,
.entry-content .size-small.hd-bookmark-collection-link,
a.size-small.hd-bookmark-collection-link {
padding: 8px 10px ;
font-size: 12px ;
gap: 5px ;
min-height: 36px ;
}

.hd-bookmark-wrapper.size-small .hd-bookmark-icon svg,
.size-small.hd-bookmark-collection-link svg {
width: 16px ;
height: 16px ;
}

/* Medium Size (default) */
.hd-bookmark-wrapper.size-medium .hd-bookmark-btn,
.size-medium.hd-bookmark-collection-link,
#si-single-content .size-medium.hd-bookmark-collection-link,
.entry-content .size-medium.hd-bookmark-collection-link,
a.size-medium.hd-bookmark-collection-link {
padding: 12px 24px ;
font-size: 16px ;
gap: 8px ;
min-height: 48px ;
}

.hd-bookmark-wrapper.size-medium .hd-bookmark-icon svg,
.size-medium.hd-bookmark-collection-link svg {
width: 20px ;
height: 20px ;
}

/* Large Size */
.hd-bookmark-wrapper.size-large .hd-bookmark-btn,
.size-large.hd-bookmark-collection-link,
#si-single-content .size-large.hd-bookmark-collection-link,
.entry-content .size-large.hd-bookmark-collection-link,
a.size-large.hd-bookmark-collection-link {
padding: 16px 32px ;
font-size: 18px ;
gap: 10px ;
min-height: 58px ;
}

.hd-bookmark-wrapper.size-large .hd-bookmark-icon svg,
.size-large.hd-bookmark-collection-link svg {
width: 24px ;
height: 24px ;
}

/* Auto wrapper styles */
.hd-bookmark-auto-wrapper,
.hd-bookmark-shortcode-wrapper,
.isb-bookmark-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 15px 0;
}

.hd-bookmark-align-left {
justify-content: flex-start;
}

.hd-bookmark-align-center {
justify-content: center;
}

.hd-bookmark-align-right {
justify-content: flex-end;
}

.hd-bookmark-auto-wrapper.has-background {
background: var(--hd-bookmark-bg, rgba(225, 29, 72, 0.08));
padding: 16px 24px;
border-radius: 12px;
}

.hd-bookmark-auto-wrapper .hd-bookmark-wrapper,
.hd-bookmark-shortcode-wrapper .hd-bookmark-wrapper {
margin: 0;
}

/* ===== Box Module Bookmark Row ===== */
/* Bookmark row container - forces second row */
.social-button-wrapper .bookmark-row {
flex-basis: 100%;
width: 100%;
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
order: 100;
}

.social-button-wrapper .bookmark-row .bookmark-item {
display: flex;
align-items: center;
}

/* Unified button styles matching social buttons */
.social-button-wrapper .bookmark-row .hd-bookmark-btn,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 12px;
border-radius: 50px;
font-weight: 500;
font-size: 0.9rem;
min-width: 100px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none ;
height: auto;
}

/* Bookmark button - filled style */
.social-button-wrapper .bookmark-row .hd-bookmark-btn {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
border: none;
color: #fff ;
}

.social-button-wrapper .bookmark-row .hd-bookmark-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.34);
opacity: 0.95;
}

.social-button-wrapper .bookmark-row .hd-bookmark-btn.is-bookmarked {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
}

/* Collection link - outline style */
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link {
background: transparent;
border: 2px solid var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
color: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
}

.social-button-wrapper .bookmark-row .hd-bookmark-collection-link:hover {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
color: #fff ;
transform: translateY(-2px);
}

/* Icon sizes - unified */
.social-button-wrapper .bookmark-row .hd-bookmark-icon svg,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}

/* Reset wrapper margin */
.social-button-wrapper .bookmark-row .hd-bookmark-wrapper {
margin: 0;
}

/* Mobile RWD - Hide text on small screens */
@media (max-width: 767px) {
.social-button-wrapper .bookmark-row .hd-bookmark-text,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link span {
display: none;
}

.social-button-wrapper .bookmark-row .hd-bookmark-btn,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link {
min-width: auto;
padding: 8px 12px;
}
}

/* ===== Toast Notification ===== */
.hd-bookmark-toast {
position: fixed;
bottom: calc(20px + var(--hd-bottom-fixed-safe-offset, 0px));
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #333;
color: #fff;
padding: 12px 24px;
border-radius: 999px;
font-size: 14px;
z-index: 10000;
opacity: 0;
max-width: min(92vw, 420px);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.hd-bookmark-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

/* ===== Bookmark List ===== */
.hd-bookmark-container {
max-width: 1200px;
margin: 0 auto;
padding: 28px 20px 56px;
}

.hd-bookmark-header {
margin-bottom: 32px;
text-align: center;
padding: 34px 24px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--hd-bookmark-radius-lg, 28px);
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 42%),
linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(239, 246, 255, 0.96));
box-shadow: var(--hd-bookmark-shadow, 0 24px 48px rgba(15, 23, 42, 0.08));
}

.hd-bookmark-header h1 {
font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
margin-bottom: 12px;
letter-spacing: -0.02em;
color: var(--hd-bookmark-ink, #0f172a);
}

.hd-bookmark-count-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
color: #475569;
font-size: 14px;
font-weight: 600;
}

.hd-bookmark-loading,
.hd-bookmark-empty,
.hd-bookmark-error {
text-align: center;
padding: 56px 24px;
color: #64748b;
font-size: 16px;
border-radius: 22px;
border: 1px solid var(--hd-bookmark-border, rgba(226, 232, 240, 0.92));
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
box-shadow: var(--hd-bookmark-shadow, 0 18px 36px rgba(15, 23, 42, 0.06));
}

.hd-bookmark-empty {
font-size: 17px;
}

/* ===== Grid Layout ===== */
.hd-bookmark-list.hd-bookmark-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}

.hd-bookmark-card {
position: relative;
background: var(--hd-bookmark-surface, #fff);
border: 1px solid var(--hd-bookmark-border, rgba(226, 232, 240, 0.9));
border-radius: 20px;
overflow: hidden;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.hd-bookmark-card:hover {
transform: translateY(-5px);
border-color: rgba(244, 114, 182, 0.22);
box-shadow: 0 24px 42px rgba(15, 23, 42, 0.12);
}

.hd-bookmark-card-link {
display: block;
text-decoration: none;
color: inherit;
}

.hd-bookmark-card-image {
position: relative;
padding-top: 56.25%;
background: #f0f0f0;
overflow: hidden;
}

.hd-bookmark-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.hd-bookmark-card:hover .hd-bookmark-card-image img {
transform: scale(1.05);
}

.hd-bookmark-no-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hd-bookmark-card-content {
padding: 18px 18px 20px;
}

.hd-bookmark-card-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 8px;
line-height: 1.4;
color: var(--hd-bookmark-ink, #0f172a);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hd-bookmark-card-excerpt {
font-size: 14px;
color: var(--hd-bookmark-muted, #64748b);
margin: 0;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hd-bookmark-remove {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(15, 23, 42, 0.72);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
}

.hd-bookmark-card:hover .hd-bookmark-remove {
opacity: 1;
}

.hd-bookmark-remove:hover {
background: #e11d48;
}

.hd-bookmark-remove:focus-visible,
.hd-bookmark-card:focus-within .hd-bookmark-remove {
opacity: 1;
}

.hd-bookmark-remove svg {
width: 16px;
height: 16px;
}

/* ===== List Layout ===== */
.hd-bookmark-list.hd-bookmark-list-view {
display: flex;
flex-direction: column;
gap: 16px;
}

.hd-bookmark-list-view .hd-bookmark-card {
display: flex;
align-items: stretch;
}

.hd-bookmark-list-view .hd-bookmark-card-link {
display: flex;
flex: 1;
}

.hd-bookmark-list-view .hd-bookmark-card-image {
width: 200px;
padding-top: 0;
flex-shrink: 0;
}

.hd-bookmark-list-view .hd-bookmark-card-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

/* ===== Compact Layout ===== */
.hd-bookmark-list.hd-bookmark-compact {
display: flex;
flex-direction: column;
gap: 12px;
}

.hd-bookmark-compact .hd-bookmark-card {
display: flex;
align-items: center;
padding: 12px;
}

.hd-bookmark-compact .hd-bookmark-card-image {
width: 60px;
height: 60px;
padding-top: 0;
border-radius: 8px;
flex-shrink: 0;
}

.hd-bookmark-compact .hd-bookmark-card-content {
padding: 0 12px;
}

.hd-bookmark-compact .hd-bookmark-card-title {
font-size: 1rem;
margin-bottom: 4px;
}

.hd-bookmark-compact .hd-bookmark-card-excerpt {
display: none;
}

.hd-bookmark-compact .hd-bookmark-remove {
position: relative;
top: auto;
right: auto;
opacity: 1;
background: #f0f0f0;
color: #666;
}

.hd-bookmark-compact .hd-bookmark-remove:hover {
background: #e11d48;
color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
.hd-bookmark-container {
padding: 20px 14px 40px;
}

.hd-bookmark-auto-wrapper.hd-bookmark-mobile-align-left {
justify-content: flex-start;
text-align: left;
}

.hd-bookmark-auto-wrapper.hd-bookmark-mobile-align-center {
justify-content: center;
text-align: center;
}

.hd-bookmark-auto-wrapper.hd-bookmark-mobile-align-right {
justify-content: flex-end;
text-align: right;
}

.hd-bookmark-header {
padding: 24px 18px;
border-radius: 22px;
}

.hd-bookmark-list.hd-bookmark-grid {
grid-template-columns: 1fr;
}

.hd-bookmark-list-view .hd-bookmark-card {
flex-direction: column;
}

.hd-bookmark-list-view .hd-bookmark-card-image {
width: 100%;
padding-top: 56.25%;
}

.hd-bookmark-remove {
opacity: 1;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.hd-bookmark-auto-wrapper,
.hd-bookmark-shortcode-wrapper,
.isb-bookmark-wrapper {
gap: 10px;
}

.hd-bookmark-list.hd-bookmark-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hd-bookmark-list-view .hd-bookmark-card-image {
width: 180px;
}
}

@media (max-width: 640px) {
.hd-bookmark-btn,
.hd-bookmark-collection-link,
#si-single-content .hd-bookmark-collection-link,
.entry-content .hd-bookmark-collection-link,
a.hd-bookmark-collection-link {
min-height: 44px;
}
}

@media (prefers-reduced-motion: reduce) {
.hd-bookmark-btn,
.hd-bookmark-collection-link,
.hd-bookmark-icon svg,
.hd-bookmark-card,
.hd-bookmark-card-image img,
.hd-bookmark-remove,
.hd-bookmark-toast {
transition: none;
}

.hd-bookmark-btn.is-processing .hd-bookmark-icon svg {
animation: none;
}

.hd-bookmark-btn:hover .hd-bookmark-icon svg,
.hd-bookmark-collection-link:hover svg,
.hd-bookmark-card:hover .hd-bookmark-card-image img {
transform: none;
}
}


/* === frontend-bookmarks.css === */
.hd-bookmark-button {
--hd-bookmark-modern-color: var(--hd-bookmark-color, #e11d48);
--hd-bookmark-modern-ink: #1f2937;
--hd-bookmark-modern-surface: #fff;
--hd-bookmark-modern-muted: #64748b;
--hd-bookmark-modern-border: rgba(226, 232, 240, 0.92);
--hd-bookmark-modern-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 40px;
padding: 0.55rem 0.9rem;
border: 1px solid rgba(225, 29, 72, 0.36);
border-radius: 999px;
background: var(--hd-bookmark-modern-surface);
color: var(--hd-bookmark-modern-ink);
font-weight: 700;
line-height: 1;
text-decoration: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.hd-bookmark-button:hover {
border-color: var(--hd-bookmark-modern-color);
background: rgba(225, 29, 72, 0.08);
color: var(--hd-bookmark-modern-color);
transform: translateY(-1px);
}

.hd-bookmark-button:focus-visible {
outline: 3px solid rgba(225, 29, 72, 0.24);
outline-offset: 3px;
}

.hd-bookmark-button.is-processing,
.hd-bookmark-button[aria-busy="true"] {
opacity: 0.62;
pointer-events: none;
}

.hd-bookmark-button.is-disabled,
.hd-bookmark-button[aria-disabled="true"] {
opacity: 0.48;
cursor: not-allowed;
pointer-events: none;
}

.hd-bookmark-button.is-error {
border-color: #dc2626;
background: rgba(220, 38, 38, 0.08);
color: #b91c1c;
}

.hd-bookmark-button .dashicons {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
font-size: 1.1rem;
line-height: 1;
}

.hd-bookmark-button .dashicons-star-empty {
display: inline-flex;
}

.hd-bookmark-button .dashicons-star-filled {
display: none;
}

.hd-bookmark-button.bookmarked,
.hd-bookmark-button[aria-pressed="true"] {
border-color: var(--hd-bookmark-modern-color);
background: var(--hd-bookmark-modern-color);
color: #fff;
}

.hd-bookmark-button.bookmarked .dashicons-star-empty,
.hd-bookmark-button[aria-pressed="true"] .dashicons-star-empty {
display: none;
}

.hd-bookmark-button.bookmarked .dashicons-star-filled,
.hd-bookmark-button[aria-pressed="true"] .dashicons-star-filled {
display: inline-flex;
color: currentColor;
}

.my-collection-list {
--hd-bookmark-modern-color: var(--hd-bookmark-color, #e11d48);
--hd-bookmark-modern-ink: #1f2937;
--hd-bookmark-modern-muted: #64748b;
--hd-bookmark-modern-border: rgba(226, 232, 240, 0.92);
--hd-bookmark-modern-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
display: grid;
gap: 1rem;
}

article.collection-item {
display: grid;
grid-template-columns: minmax(96px, 160px) minmax(0, 1fr);
gap: 1rem;
align-items: center;
margin-bottom: 1.15rem;
padding: 1rem;
border: 1px solid var(--hd-bookmark-modern-border);
border-radius: 18px;
background: #fff;
box-shadow: var(--hd-bookmark-modern-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

article.collection-item:hover {
border-color: rgba(225, 29, 72, 0.24);
box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
transform: translateY(-2px);
}

article.collection-item img {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
border-radius: 14px;
}

article.collection-item h2 {
margin: 0 0 0.55rem;
font-size: clamp(1.08rem, 1rem + 0.35vw, 1.35rem);
line-height: 1.35;
}

article.collection-item h2 a {
color: var(--hd-bookmark-modern-ink);
text-decoration: none;
}

article.collection-item h2 a:hover {
color: var(--hd-bookmark-modern-color);
}

article.collection-item p {
margin: 0 0 0.85rem;
color: var(--hd-bookmark-modern-muted);
line-height: 1.65;
}

@media (max-width: 900px) {
article.collection-item {
grid-template-columns: 120px minmax(0, 1fr);
}
}

@media (max-width: 640px) {
.hd-bookmark-button {
width: 100%;
min-height: 44px;
padding: 0.72rem 0.95rem;
}

article.collection-item {
grid-template-columns: 1fr;
padding: 0.9rem;
}

article.collection-item img {
aspect-ratio: 16 / 9;
}
}

@media (prefers-reduced-motion: reduce) {
.hd-bookmark-button,
article.collection-item {
transition: none;
}

.hd-bookmark-button:hover,
article.collection-item:hover {
transform: none;
}
}


/* === frontend-spoiler-card.css === */
.wp-block-custom-spoiler-card { margin: 1.5em 0; }
.spoiler-card-wrapper { border: 1px solid #e0e0e0; overflow: hidden; position: relative; }
.spoiler-card-content-wrapper {  background: #fff; }
.spoiler-card-content-wrapper > *:first-child { margin-top: 0; } .spoiler-card-content-wrapper > *:last-child { margin-bottom: 0; }
.effect-collapse { background: #f9f9f9; }
.effect-collapse .spoiler-card-title { padding: 12px 18px; font-weight: bold; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #f1f1f1; }
.effect-collapse .spoiler-card-title::-webkit-details-marker { display: none; }
.effect-collapse .spoiler-card-icon { width: 1em; height: 1em; position: relative; }
.effect-collapse .spoiler-card-icon::before, .effect-collapse .spoiler-card-icon::after { content: ''; position: absolute; background-color: #333; transition: transform 0.3s ease; }
.effect-collapse .spoiler-card-icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.effect-collapse .spoiler-card-icon::after { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; }
.effect-collapse[open] > .spoiler-card-title .spoiler-card-icon { transform: rotate(45deg); }
.effect-collapse > .spoiler-card-content-wrapper { padding: 0 !important; max-height: 0; overflow: hidden; transition: all 0.4s ease-out; opacity: 0; }
.effect-collapse[open] > .spoiler-card-content-wrapper { padding: 20px !important; max-height: 1000vh; opacity: 1; border-top: 1px solid #e0e0e0; }
.effect-blur, .effect-pixelate { cursor: pointer; }
.spoiler-card-prompt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; border-radius: 5px; z-index: 3; font-weight: bold; text-align: center; transition: opacity 0.4s ease; user-select: none; pointer-events: none; }
.is-revealed .spoiler-card-prompt { opacity: 0; }
.effect-blur > .spoiler-card-content-wrapper { filter: blur(var(--spoiler-strength, 8px)); transition: filter 0.4s ease; }
.is-revealed.effect-blur > .spoiler-card-content-wrapper { filter: blur(0); }
.effect-pixelate > .spoiler-card-content-wrapper { image-rendering: pixelated; filter: blur(calc(var(--spoiler-strength, 8px) / 4)); transition: filter 0.4s ease, image-rendering 0.1s step-end; }
.is-revealed.effect-pixelate > .spoiler-card-content-wrapper { image-rendering: auto; filter: blur(0); transition: filter 0.4s ease, image-rendering 0.1s step-start; }
.spoiler-event-blocker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; }
.is-revealed .spoiler-event-blocker { display: none; }
.effect-password > .spoiler-card-content-wrapper { display: none; }
.effect-password.is-revealed > .spoiler-card-content-wrapper { display: block; }
.effect-password.is-revealed > .spoiler-card-prompt-password { display: none; }
.spoiler-card-prompt-password { padding: 20px; background: #f9f9f9; text-align: center; }
.spoiler-card-prompt-password input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-right: 5px; }
.spoiler-card-prompt-password input.error { border-color: red; }
.spoiler-card-prompt-password button { padding: 8px 15px; border: none; background: #333; color: white; cursor: pointer; border-radius: 4px; }
.effect-countdown > .spoiler-card-content-wrapper { visibility: hidden; opacity: 0; max-height: 0; transition: visibility 0s 0.4s, opacity 0.4s, max-height 0.4s; }
.is-revealed.effect-countdown > .spoiler-card-content-wrapper { visibility: visible; opacity: 1; max-height: 1000vh; transition-delay: 0s; }
.spoiler-card-prompt-countdown { padding: 20px; background: #fff3cd; border: 1px solid #ffeeba; text-align: center; z-index: 3; position: relative; }
.countdown-text { white-space: pre-wrap; }
.is-revealed .spoiler-card-prompt-countdown { display: none; }
.effect-scratchcard { padding: 0; }
.effect-scratchcard .spoiler-card-content-wrapper { border-radius: 8px; }
.effect-scratchcard .spoiler-card-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; cursor: crosshair; }
.spoiler-card-prompt-scratch { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(0,0,0,0.6); z-index: 3; pointer-events: none; font-weight: bold; transition: opacity 0.3s ease; }
.effect-scratchcard.is-scratched .spoiler-card-canvas,
.effect-scratchcard.is-scratched .spoiler-card-prompt-scratch { display: none; }


/* === page-popular.css === */
/**
 * Popular Page Styles
 * 
 * @package 20190301-nashiyoi
 * @since 1.0.0
 */

/* Popular Page Layout */
.popular-page-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px 64px;
    --popular-card-min-width: min(100%, 320px);
    --popular-card-gap: clamp(16px, 2vw, 25px);
    --popular-list-thumb-width: clamp(170px, 22vw, 260px);
    --popular-list-min-height: 176px;
    --excerpt-lines-desktop: 3;
    --excerpt-lines-tablet: 3;
    --excerpt-lines-mobile: 2;
}

/* Hero Section */
.popular-hero {
text-align: center;
margin-bottom: 40px;
padding: 46px 24px;
background:
radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 36%),
linear-gradient(135deg, #14324d 0%, #24557d 56%, #3b82b5 100%);
border: 1px solid rgba(191, 219, 254, 0.16);
border-radius: 28px;
color: #fff;
box-shadow: 0 28px 54px rgba(15, 23, 42, 0.14);
}

.popular-hero h1 {
font-size: 32px;
margin: 0 0 10px;
font-weight: 700;
}

.popular-hero p {
font-size: 16px;
opacity: 0.9;
margin: 0;
color:#fff;
}

/* Controls: Period Tabs + View Toggle */
.popular-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
gap: 20px;
flex-wrap: wrap;
padding: 18px;
border-radius: 22px;
border: 1px solid rgba(226, 232, 240, 0.92);
background: rgba(255, 255, 255, 0.94);
box-shadow: none;
}

.popular-period-tabs-shell {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}

.period-tabs {
display: flex;
gap: 10px;
flex: 1 1 auto;
flex-wrap: nowrap;
min-width: 0;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}

.period-tabs::-webkit-scrollbar {
display: none;
}

.period-tabs-arrow {
display: none;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border: 1px solid rgba(226, 232, 240, 0.92);
border-radius: 999px;
background: #fff;
color: #1a3a5c;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.period-tabs-arrow span {
font-size: 22px;
line-height: 1;
transform: translateY(-1px);
}

.popular-period-tabs-shell.is-scrollable .period-tabs-arrow {
display: inline-flex;
}

.period-tabs-arrow:hover:not(:disabled) {
background: #eff6ff;
border-color: rgba(125, 211, 252, 0.42);
}

.period-tabs-arrow:disabled {
opacity: 0.34;
cursor: default;
}

.period-tab {
display: inline-block;
flex: 0 0 auto;
padding: 12px 24px;
background: #f8fafc;
color: #334155;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
transition: all 0.2s ease;
border: 1px solid rgba(226, 232, 240, 0.9);
}

.period-tab:hover {
background: #eff6ff;
border-color: rgba(125, 211, 252, 0.32);
color: #0f172a;
}

.period-tab.active {
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
color: #fff;
border-color: transparent;
box-shadow: none;
}

/* View Toggle */
.view-toggle {
display: flex;
gap: 4px;
background: #f8fafc;
padding: 4px;
border-radius: 12px;
border: 1px solid rgba(226, 232, 240, 0.9);
}

.view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
color: #64748b;
transition: all 0.2s ease;
}

.view-btn:hover {
background: #e2e8f0;
color: #334155;
}

.view-btn.active {
background: #fff;
color: #1a3a5c;
box-shadow: none;
}

/* Posts Grid */
.popular-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--popular-card-min-width), 1fr));
gap: var(--popular-card-gap);
}

/* Posts List View */
.popular-list {
display: flex;
flex-direction: column;
gap: 16px;
}

.popular-list .popular-card {
display: grid;
grid-template-columns: minmax(160px, var(--popular-list-thumb-width)) minmax(0, 1fr);
align-items: stretch;
min-height: var(--popular-list-min-height);
max-height: none;
}

.popular-list .popular-card-thumbnail {
width: 100%;
min-width: 0;
aspect-ratio: auto;
height: auto;
min-height: var(--popular-list-min-height);
align-self: stretch;
}

.popular-list .popular-card-thumbnail img,
.popular-list .popular-card-thumbnail .no-thumbnail {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}

.popular-list .popular-card-content {
padding: 16px 20px;
min-width: 0;
}

.popular-list .popular-card-title {
font-size: 16px;
margin-bottom: 8px;
}

.popular-list .popular-card-excerpt {
font-size: 13px;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: var(--excerpt-lines-desktop, 3);
-webkit-box-orient: vertical;
overflow: hidden;
flex: 0 1 auto;
max-height: calc(var(--excerpt-lines-desktop, 3) * 1.5em);
}

.popular-list .popular-card-rank {
width: 32px;
height: 32px;
font-size: 14px;
}

@media (max-width: 767px) {
.popular-page-wrapper {
--popular-card-min-width: 100%;
--popular-card-gap: 16px;
--popular-list-thumb-width: clamp(92px, 32vw, 118px);
--popular-list-min-height: clamp(108px, 30vw, 124px);
}

.popular-list .popular-card {
display: grid;
grid-template-columns: minmax(92px, var(--popular-list-thumb-width)) minmax(0, 1fr);
align-items: stretch;
min-height: var(--popular-list-min-height);
max-height: none;
}

.popular-list .popular-card-thumbnail {
width: 100%;
min-width: 0;
height: auto;
min-height: var(--popular-list-min-height);
aspect-ratio: auto;
}

.popular-list .popular-card-content {
padding: 10px 15px;
}

.popular-list .popular-card-title {
font-size: 15px;
margin-bottom: 5px;
}

.popular-list .popular-card-excerpt {
display: -webkit-box;
-webkit-line-clamp: var(--excerpt-lines-mobile, 2);
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12px;
line-height: 1.5;
margin-bottom: 8px;
max-height: calc(var(--excerpt-lines-mobile, 2) * 1.5em);
}

.popular-list .popular-card-meta {
font-size: 11px;
}

.popular-list .popular-card-stats {
display: none;
}
}

.popular-card {
background: #fff;
border: 1px solid rgba(226, 232, 240, 0.92);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
display: flex;
flex-direction: column;
animation: fadeInUp 0.4s ease-out both;
min-width: 0;
position: relative;
}

.popular-list .popular-card--no-thumbnail {
grid-template-columns: minmax(0, 1fr);
}

.popular-card--no-thumbnail .popular-card-content {
padding-top: 54px;
}

.popular-card:nth-child(1) { animation-delay: 0.05s; }
.popular-card:nth-child(2) { animation-delay: 0.1s; }
.popular-card:nth-child(3) { animation-delay: 0.15s; }
.popular-card:nth-child(4) { animation-delay: 0.2s; }
.popular-card:nth-child(5) { animation-delay: 0.25s; }
.popular-card:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.popular-card:hover {
transform: translateY(-4px);
box-shadow: 0 26px 48px rgba(15, 23, 42, 0.14);
}

.popular-card-thumbnail {
aspect-ratio: 16/9;
overflow: hidden;
background: linear-gradient(135deg, #f0f0f1 0%, #e5e7eb 100%);
position: relative;
}

.popular-card-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.popular-card:hover .popular-card-thumbnail img {
transform: scale(1.05);
}

.popular-card-thumbnail .no-thumbnail {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
font-size: 48px;
}

.popular-card-rank {
position: absolute;
top: 12px;
left: 12px;
width: 38px;
height: 38px;
background: rgba(20, 20, 30, 0.85);
backdrop-filter: blur(4px);
color: #fff;
font-weight: 700;
font-size: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 2;
}

.popular-card-rank--text {
top: 16px;
left: 20px;
}

/* Top 3 Medals - Gold, Silver, Bronze */
/* Top 3 Medals - Gold, Silver, Bronze (Lighter/Softer) */
.popular-card-rank.top-3[data-rank="1"] {
background: linear-gradient(135deg, #ffe55c 0%, #ffc83d 100%);
color: #8a6a00;
}

.popular-card-rank.top-3[data-rank="2"] {
background: linear-gradient(135deg, #f5f5f5 0%, #dcdcdc 100%);
color: #555;
}

.popular-card-rank.top-3[data-rank="3"] {
background: linear-gradient(135deg, #e3c193 0%, #d6a66d 100%);
color: #6d4618;
}

.popular-card-content {
padding: 20px 20px 22px;
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}

.popular-card-title,
.popular-card-excerpt,
.popular-card-meta,
.popular-card-stats {
min-width: 0;
}

.popular-card-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 10px;
line-height: 1.4;
color: #0f172a;
}

.popular-card-title a {
color: inherit;
text-decoration: none;
overflow-wrap: anywhere;
}

.popular-card-title a:hover {
color: #2d5a87;
}

.popular-card-excerpt {
font-size: 14px;
color: #64748b;
line-height: 1.6;
margin-bottom: 15px;
flex: 0 1 auto;
display: -webkit-box;
-webkit-line-clamp: var(--excerpt-lines-desktop, 3);
-webkit-box-orient: vertical;
overflow: hidden;
max-height: calc(var(--excerpt-lines-desktop, 3) * 1.6em);
text-align: left;
}

.popular-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
font-size: 13px;
color: #64748b;
}

.popular-card-views {
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
color: #e11d48;
}

.popular-card-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(226, 232, 240, 0.7);
align-content: flex-start;
}

.popular-card-stat-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(248, 250, 252, 0.92);
border: 1px solid rgba(226, 232, 240, 0.84);
color: #64748b;
font-size: 11px;
line-height: 1.2;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}

.popular-card-stat-chip strong {
color: #0f172a;
font-weight: 700;
font-size: 12px;
font-variant-numeric: tabular-nums;
}

.popular-card-stat-chip.is-current {
background: linear-gradient(135deg, rgba(26, 58, 92, 0.1), rgba(45, 90, 135, 0.06));
border-color: rgba(45, 90, 135, 0.28);
color: #1a3a5c;
}

.popular-card-stat-chip.is-current strong {
color: #1a3a5c;
}

.popular-list .popular-card-stats {
margin-top: 8px;
padding-top: 6px;
border-top: 0;
gap: 5px;
}

.popular-list .popular-card-stat-chip {
min-height: 22px;
padding: 2px 7px;
font-size: 10.5px;
}

.popular-list .popular-card-stat-chip strong {
font-size: 11.5px;
}

/* 18+ Badge */
.popular-card-adult-badge {
position: absolute;
top: 12px;
right: 12px;
background: #dc2626;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 8px;
border-radius: 4px;
}

/* No Posts Message */
.no-posts-message {
text-align: center;
padding: 60px 20px;
max-width: 720px;
margin: 0 auto;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
border: 1px solid rgba(226, 232, 240, 0.92);
border-radius: 22px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
color: #64748b;
}

.no-posts-message h3 {
margin: 0 0 10px;
font-size: 20px;
color: #333;
}

/* Responsive */
@media (min-width: 768px) and (max-width: 1100px) {
.popular-page-wrapper {
--popular-card-min-width: min(100%, 300px);
--popular-card-gap: 18px;
}

.popular-card-excerpt,
.popular-list .popular-card-excerpt {
-webkit-line-clamp: var(--excerpt-lines-tablet, 3);
max-height: calc(var(--excerpt-lines-tablet, 3) * 1.6em);
}
}

@media (hover: none) {
.popular-card:hover {
transform: none;
}

.popular-card:hover .popular-card-thumbnail img {
transform: none;
}
}

@media (max-width: 767px) {
.popular-page-wrapper {
padding: 20px 15px;
}

.popular-hero {
padding: 32px 16px;
border-radius: 22px;
}

.popular-hero h1 {
font-size: 24px;
}

/* Make controls stack properly */
.popular-controls {
gap: 15px;
align-items: stretch;
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 14px;
border-radius: 18px;
}

.popular-period-tabs-shell {
margin-bottom: 0;
}

.period-tabs {
-webkit-overflow-scrolling: touch;
/*padding-bottom: 5px;*/
gap: 10px;
margin-bottom: 0;
/* Hide scrollbar */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}

.period-tabs-arrow {
flex-basis: 30px;
width: 30px;
height: 30px;
}

.period-tabs::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}

.period-tab {
flex: 0 0 auto; /* Don't shrink */
padding: 8px 16px;
font-size: 14px;
white-space: nowrap;
}

/* View Toggle */
.view-toggle {
display: none; /* Optional: Hide toggle on mobile if list view is forced, or keep it */
/* If keeping it, position it better */
}

.popular-grid {
grid-template-columns: 1fr;
}

.popular-card {
border-radius: 18px;
}

.popular-card-excerpt {
-webkit-line-clamp: var(--excerpt-lines-mobile, 2);
max-height: calc(var(--excerpt-lines-mobile, 2) * 1.6em);
}
}