/* Katen widgets: preserve the source ratio and avoid stretched thumbnails. */
.katen-widget-card{min-width:0;overflow:hidden;border:1px solid var(--katen-pro-border,#e8edf2);border-radius:12px;background:var(--katen-pro-bg,#fff)}
.katen-widget-card__media{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--katen-pro-surface,#f4f7f9)}
.katen-widget-card__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.katen-widget-card__body{display:flex;min-width:0;flex-direction:column;gap:6px;padding:14px}
.katen-widget-card__title{margin:0;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.katen-widget-card__title a{color:var(--katen-pro-text,#203656)}
.katen-widget-card__body time,.katen-widget-popular__item time{color:var(--katen-pro-muted,#8f9bad);font-size:12px}
.katen-widget-gallery{margin:28px 0}
.katen-widget-module__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.katen-widget-module__head h2,.katen-widget-gallery h2,.katen-roadmap h2,.katen-wiki h2{margin:0;color:var(--katen-pro-text,#203656);font-size:24px}
.katen-widget-gallery__items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.katen-widget-gallery--carousel .katen-widget-gallery__items{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.katen-widget-gallery--carousel .katen-widget-card{flex:0 0 min(300px,82vw);scroll-snap-align:start}
.katen-widget-gallery--list .katen-widget-gallery__items,.katen-widget-gallery--compact .katen-widget-gallery__items,.katen-wiki__items{grid-template-columns:1fr}
.katen-widget-gallery--list .katen-widget-card,.katen-widget-gallery--compact .katen-widget-card,.katen-wiki .katen-widget-card{display:grid;grid-template-columns:110px minmax(0,1fr)}
.katen-widget-gallery--list .katen-widget-card__media,.katen-widget-gallery--compact .katen-widget-card__media,.katen-wiki .katen-widget-card__media{aspect-ratio:1/1;height:100%}
.katen-widget-gallery--overlay .katen-widget-card{position:relative;border:0;background:#152236}
.katen-widget-gallery--overlay .katen-widget-card__media{aspect-ratio:16/10}
.katen-widget-gallery--overlay .katen-widget-card__body{position:absolute;right:0;bottom:0;left:0;background:linear-gradient(transparent,rgb(0 0 0 / .8));color:#fff}
.katen-widget-gallery--overlay .katen-widget-card__title a,.katen-widget-gallery--overlay .katen-widget-card__body time{color:#fff}
.katen-widget-gallery--masonry .katen-widget-gallery__items{align-items:start}
.katen-widget-gallery--masonry .katen-widget-card:nth-child(3n+2) .katen-widget-card__media{aspect-ratio:3/4}
/* ==========================================================================
   Katen Popular Posts Modern Layout & Styling
   ========================================================================== */
.katen-widget-popular {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.katen-popular-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  position: relative;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

body.dark .katen-popular-item {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.katen-popular-item:hover {
  background: rgba(45, 131, 163, 0.04);
}

body.dark .katen-popular-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.katen-popular-item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.katen-popular-item:after {
  display: none !important;
}

/* Compact Thumbnail Wrap (56px) */
.katen-popular-item .thumb {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  float: none !important;
  margin: 0 !important;
}

.katen-popular-item .thumb.rounded {
  border-radius: 10px;
  overflow: visible;
}

.katen-popular-item .thumb.circle {
  border-radius: 50%;
  overflow: visible;
}

.katen-popular-item .thumb .inner {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--katen-pro-surface, #f1f5f9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  position: relative;
}

.katen-popular-item .thumb.rounded .inner {
  border-radius: 10px;
}

.katen-popular-item .thumb.circle .inner {
  border-radius: 50%;
}

.katen-popular-item .thumb .inner img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s ease;
}

.katen-popular-item:hover .thumb .inner img {
  transform: scale(1.08);
}

/* Placeholder */
.katen-popular-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(45, 131, 163, 0.12), rgba(52, 163, 207, 0.2));
  color: var(--katen-pro-accent, #2d83a3);
  font-size: 18px;
}

.katen-popular-placeholder.mini {
  font-size: 14px;
}

/* Sleek Minimalist Rank Badge */
.katen-popular-rank {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff !important;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  z-index: 3;
  transition: transform .2s ease;
}

body.dark .katen-popular-rank {
  border-color: #202b3c;
}

.katen-popular-item:hover .katen-popular-rank {
  transform: scale(1.15);
}

/* Top 3 Distinctive Badges */
.katen-popular-rank.rank-1 {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5) !important;
}

.katen-popular-rank.rank-2 {
  background: linear-gradient(135deg, #2d83a3, #34a3cf) !important;
  box-shadow: 0 2px 8px rgba(45, 131, 163, 0.4) !important;
}

.katen-popular-rank.rank-3 {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4) !important;
}

.katen-popular-rank.rank-4,
.katen-popular-rank.rank-5,
.katen-popular-rank.rank-6,
.katen-popular-rank.rank-7,
.katen-popular-rank.rank-8,
.katen-popular-rank.rank-9,
.katen-popular-rank.rank-10 {
  background: #64748b !important;
}

body.dark .katen-popular-rank.rank-4,
body.dark .katen-popular-rank.rank-5,
body.dark .katen-popular-rank.rank-6,
body.dark .katen-popular-rank.rank-7,
body.dark .katen-popular-rank.rank-8,
body.dark .katen-popular-rank.rank-9,
body.dark .katen-popular-rank.rank-10 {
  background: #475569 !important;
}

/* Details Section */
.katen-popular-details {
  flex: 1;
  min-width: 0;
  margin-left: 0 !important;
}

.katen-popular-topline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

/* Category Pill */
.katen-popular-cat-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--katen-pro-accent, #2d83a3);
  text-decoration: none;
  background: rgba(45, 131, 163, 0.08);
  border: 1px solid rgba(45, 131, 163, 0.15);
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.35;
  transition: all .2s ease;
}

body.dark .katen-popular-cat-badge {
  background: rgba(45, 131, 163, 0.2);
  border-color: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

.katen-popular-cat-badge:hover {
  background: var(--katen-pro-accent, #2d83a3);
  border-color: var(--katen-pro-accent, #2d83a3);
  color: #ffffff !important;
}

/* Post Title */
.katen-popular-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 4px 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.katen-popular-title a {
  color: var(--katen-pro-text, #1e293b);
  text-decoration: none;
  transition: color .2s ease;
}

body.dark .katen-popular-title a {
  color: #f1f5f9;
}

.katen-popular-title a:hover {
  color: var(--katen-pro-accent, #2d83a3) !important;
}

/* Meta Data */
.katen-popular-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--katen-pro-muted, #64748b);
  margin-top: 0 !important;
}

body.dark .katen-popular-meta {
  color: #94a3b8;
}

.katen-popular-meta li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 0 !important;
  padding: 0 !important;
}

.katen-popular-meta li i {
  font-size: 10px;
  opacity: .8;
}

/* Sleek Interactive Arrow Button */
.katen-popular-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--katen-pro-surface, #f1f5f9);
  color: var(--katen-pro-muted, #94a3b8);
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 6px;
  text-decoration: none !important;
  transition: all .2s ease;
  opacity: 0.65;
}

body.dark .katen-popular-arrow-btn {
  background: #1e293b;
  color: #cbd5e1;
}

.katen-popular-item:hover .katen-popular-arrow-btn {
  background: var(--katen-pro-accent, #2d83a3);
  color: #ffffff;
  transform: translateX(2px);
  opacity: 1;
}

/* Card First Style (Featured #1) */
.katen-popular-featured-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--katen-pro-border, #e2e8f0);
  background: var(--katen-pro-bg, #ffffff);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 4px;
  transition: transform .25s ease, box-shadow .25s ease;
}

body.dark .katen-popular-featured-card {
  background: #1a2536;
  border-color: #273549;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.katen-popular-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

.katen-popular-featured-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--katen-pro-surface, #f1f5f9);
  max-height: 160px;
}

.katen-popular-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.katen-popular-featured-card:hover .katen-popular-featured-media img {
  transform: scale(1.05);
}

.katen-popular-featured-media .katen-popular-rank {
  top: 8px;
  left: 8px;
  width: auto;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  gap: 4px;
}

.katen-popular-featured-body {
  padding: 10px 12px;
}

.katen-popular-featured-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 4px 0 !important;
}

.katen-popular-featured-title a {
  color: var(--katen-pro-text, #1e293b);
  text-decoration: none;
}

body.dark .katen-popular-featured-title a {
  color: #f8fafc;
}

.katen-popular-featured-title a:hover {
  color: var(--katen-pro-accent, #2d83a3);
}

/* Compact layout */
.katen-widget-popular--compact .katen-popular-item {
  display: flex !important;
  padding: 6px 4px !important;
}

.katen-widget-popular--compact .katen-popular-rank.inline-rank {
  position: static;
  width: 18px;
  height: 18px;
  font-size: 9.5px;
  margin-right: 4px;
  border: none;
  box-shadow: none;
  display: inline-flex;
}

/* ==========================================================================
   Mobile Responsive Adjustments for Popular Posts
   ========================================================================== */
@media (max-width: 768px) {
  .katen-widget-popular {
    gap: 8px !important;
  }

  .katen-popular-item {
    gap: 10px !important;
    padding: 6px 6px !important;
  }

  .katen-popular-item .thumb,
  .katen-popular-item .thumb .inner {
    width: 48px !important;
    height: 48px !important;
  }

  .katen-popular-item .thumb.rounded,
  .katen-popular-item .thumb.rounded .inner {
    border-radius: 8px !important;
  }

  .katen-popular-rank {
    width: 17px !important;
    height: 17px !important;
    font-size: 9px !important;
    top: -3px !important;
    left: -3px !important;
    border-width: 1.5px !important;
  }

  .katen-popular-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
  }

  .katen-popular-cat-badge {
    font-size: 8.5px !important;
    padding: 1px 6px !important;
  }

  .katen-popular-meta {
    font-size: 10px !important;
    gap: 6px !important;
  }

  .katen-popular-arrow-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 9.5px !important;
    margin-left: 2px !important;
  }

  .katen-popular-featured-media {
    max-height: 130px !important;
  }

  .katen-popular-featured-body {
    padding: 8px 10px !important;
  }

  .katen-popular-featured-title {
    font-size: 13.5px !important;
    margin: 3px 0 !important;
  }
}
.katen-roadmap,.katen-wiki{margin:28px 0;padding:20px;border:1px solid var(--katen-pro-border,#e8edf2);border-radius:14px;background:var(--katen-pro-bg,#fff)}
.katen-roadmap__list{display:grid;gap:14px;margin:18px 0 0;padding:0;list-style:none}
.katen-roadmap__list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
.katen-roadmap__number{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--katen-pro-accent,#2d83a3),var(--katen-pro-accent-2,#34a3cf));color:#fff;font-weight:700}
.katen-roadmap__list strong{color:var(--katen-pro-text,#203656)}
.katen-roadmap__list p{margin:2px 0 0;color:var(--katen-pro-muted,#8f9bad);font-size:14px}
/* Compatibility with the original katen-widgets plugin markup. */
.sidebar .post.post-list-sm .thumb,.sidebar .post.post-list-sm .thumb.circle{width:76px;height:76px;overflow:hidden;border-radius:12px}
.sidebar .post.post-list-sm .thumb img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;aspect-ratio:1/1}
.post-carousel-widget .thumb .inner{display:block;overflow:hidden;aspect-ratio:4/3}
.post-carousel-widget .thumb .inner img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
@media(max-width:767px){.katen-widget-gallery__items{grid-template-columns:repeat(2,minmax(0,1fr))}.katen-widget-gallery--list .katen-widget-card,.katen-widget-gallery--compact .katen-widget-card,.katen-wiki .katen-widget-card{grid-template-columns:88px minmax(0,1fr)}}
@media(max-width:480px){.katen-widget-gallery__items{grid-template-columns:1fr}.katen-widget-module__head h2,.katen-widget-gallery h2,.katen-roadmap h2,.katen-wiki h2{font-size:20px}}