/* Lucide inline icons */
.kj-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  shape-rendering: geometricPrecision;
}

.kj-icon--sm {
  margin-inline-start: 0.15em;
}

.kj-icon--dismiss {
  color: var(--color-white);
}

.kj-icon--settings {
  margin-inline-end: 5.6px;
  vertical-align: -0.15em;
}

.kj-share__btn .kj-icon,
.kj-share__trigger .kj-icon,
.kj-share__google .kj-icon {
  display: block;
}

/* Video play badge inside article-card featured images */
.kj-card__media,
.kj-home-strip__media,
.kj-home-list__media,
.kj-layout-media,
.kj-layout-stack-item__media,
.kj-layout-thumb-row__media,
.kj-front-latest__media,
.kj-teaser__media,
.kj-inline-related__thumb,
.kj-embed__media,
.sidebar-selected__thumb,
.sidebar-feed__thumb,
.sidebar-timeline__thumb,
.kj-cat-thumb,
.kj-hero-slider,
.kj-ad,
.kj-ad img,
.kj-ad iframe,
.kj-ad ins {
  border-radius: 0;
}

.kj-card__media,
.kj-home-strip__media,
.kj-home-list__media,
.kj-layout-media,
.kj-layout-thumb-row__media,
.kj-hero-slider__link,
.kj-cat-thumb {
  position: relative;
}

.kj-card__media a,
.kj-home-strip__media a,
.kj-home-list__media a,
.kj-layout-media a,
.kj-layout-thumb-row__media a,
.kj-hero-slider__link,
.kj-cat-thumb {
  position: relative;
  display: block;
}

/* Badge scales with its media box: % width resolves against the positioned
   thumbnail, so tiny list thumbs get a small badge and wide cards a bigger one. */
.kj-video-badge {
  position: absolute;
  left: clamp(4px, 3%, 16px);
  bottom: clamp(4px, 3%, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 12%, 40px);
  aspect-ratio: 1;
  border-radius: 12%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  pointer-events: none;
}

.kj-video-badge .kj-icon {
  flex: none;
  width: 50%;
  height: auto;
  aspect-ratio: 1;
  fill: currentColor;
  stroke: currentColor;
}

/* Footer styling */
.footer-wrapper {
  border-top: 1px solid var(--footer-border);
  padding: 40px 0 48px;
  background-color: var(--surface-dark);
}

@media (max-width: 659px) {
  .footer-wrapper {
    padding: 24px 0 32px;
  }
}

.footer-container {
  background: var(--surface-dark);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--footer-border);
}

@media (max-width: 659px) {
  .footer-top {
    padding-bottom: 20px;
  }
}

.footer-top-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.footer-logo-link {
  display: block;
  line-height: 0;
}

.footer-tagline {
  margin: 0;
  font-family: var(--monoFont);
  font-size: 12px;
  font-weight: 400;
  color: var(--footer-text);
  line-height: 1.2;
}

.footer-logo {
  width: 225px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 500px) {
  .footer-logo {
    width: 160px;
  }
}

.footer-back-to-top {
  flex-shrink: 0;
  font-family: var(--primaryFont);
  font-size: 13px;
  font-weight: 700;
  color: var(--footer-btn-text, var(--footer-text));
  background: var(--footer-btn-bg);
  border: none;
  border-radius: 2px;
  padding: 5.6px 13.6px;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1.2;
}

@media (hover: hover) and (pointer: fine) {
  .footer-back-to-top:hover {
    background: var(--footer-btn-bg-hover);
  }
}

.footer-desc-block {
  flex: 2 1 224px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.footer-desc {
  font-family: var(--monoFont);
  font-size: 12px;
  font-weight: 400;
  color: var(--footer-text);
  line-height: 1.6;
  margin: 0;
}

.footer-nav {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  align-items: start;
  column-gap: 32px;
  row-gap: 20px;
  padding-top: 24px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  font-family: var(--primaryFont);
  font-size: 13px;
  font-weight: 600;
  color: var(--footer-text);
  text-decoration: none;
  text-transform: uppercase;
}

.footer-links a.current {
  opacity: 0.72;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover {
    opacity: 0.72;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
}

.footer-app-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 0;
  flex: 1 1 100%;
}

.footer-app-stores__link {
  display: inline-block;
  line-height: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .footer-app-stores__link {
    transition: opacity 0.2s var(--ease-out);
  }
}

@media (hover: hover) and (pointer: fine) {
  .footer-app-stores__link:hover {
    opacity: 0.82;
  }
}

.footer-app-stores__badge {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
}

@media (max-width: 659px) {
  .footer-app-stores__badge {
    height: 36px;
  }
}

.footer-credit {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-meta {
  margin: 0;
  font-family: var(--monoFont);
  font-size: 12px;
  font-weight: 400;
  color: var(--footer-text);
  line-height: 1.6;
  text-transform: uppercase;
}

.footer-details {
  grid-column: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 32px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  min-width: 0;
}

.footer-editorial {
  flex: 3;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-info {
  font-family: var(--primaryFont);
  font-size: 12px;
  font-weight: 400;
  color: var(--footer-text);
  line-height: 1.6;
}

.site-built-with {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--footer-text);
}

.site-built-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: transparent;
  padding: 0;
}

.site-built-label {
  font-family: var(--monoFont);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.swiss-mark {
  position: relative;
  display: block;
  height: 28px;
  aspect-ratio: 42.4 / 32;
  color: inherit;
}

.swiss-mark canvas {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.swiss-vector-icon {
  width: 22px;
}

@media (max-width: 768px) {
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  /* Two columns: primary + tertiary stacked on the left, secondary on the right. */
  .footer-links--primary {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-links--secondary {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .footer-links--tertiary {
    grid-column: 1;
    grid-row: 2;
  }

  .footer-details {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: column;
  }

  .footer-desc-block,
  .footer-editorial,
  .footer-credit {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.circle {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  border: solid 2px var(--color-white);
}
.c1 {
  top: -600px;
  left: -500px;
}
.c2 {
  bottom: -600px;
  right: -200px;
}
.c3 {
  bottom: -400px;
  right: -585px;
}

.social {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

/* Unified section / category headings
   Homepage sections, archive titles, related, sidebars, WebTV, featured videos. */
.kj-heading,
.kj-heading--webtv,
.fv-section-title,
.s-result,
.most-popular h2,
.forum-slider-title h2,
.sidebar-title h2,
.selected-sidebar-title h2 {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--primaryFont);
  font-weight: var(--kj-heading-weight);
  font-size: var(--kj-heading-size);
  line-height: var(--kj-heading-line);
  letter-spacing: var(--kj-heading-tracking);
  text-transform: capitalize;
  text-wrap: balance;
  color: var(--text-primary);
  background: none;
  border: 0;
  border-radius: 0;
}

@media screen and (min-width: 767px) {
  .kj-heading:not(.kj-heading--compact),
  .kj-heading--webtv,
  .fv-section-title,
  .s-result {
    font-size: var(--kj-heading-size-lg);
  }
}

.kj-heading a,
.kj-heading__text a,
.most-popular h2 a,
.forum-slider-title h2 a,
.sidebar-title h2 a,
.selected-sidebar-title h2 a,
.kj-heading--webtv a:not(.webtv-section-yt-btn-mobile) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .kj-heading a:not(.webtv-section-yt-btn-mobile):hover,
  .kj-heading__text a:hover,
  .most-popular h2 a:hover,
  .forum-slider-title h2 a:hover,
  .sidebar-title h2 a:hover,
  .selected-sidebar-title h2 a:hover {
    opacity: 0.72;
  }
}

.kj-heading::before,
.kj-heading--webtv::before,
.fv-section-title::before,
.s-result::before,
.most-popular h2::before,
.forum-slider-title h2::before,
.sidebar-title h2::before,
.selected-sidebar-title h2::before {
  content: "";
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  order: 3;
  margin-inline-start: var(--kj-heading-rule-gap);
  background-color: currentColor;
  opacity: var(--kj-heading-rule-opacity);
}

.kj-heading--compact,
.most-popular h2,
.forum-slider-title h2,
.sidebar-title h2,
.selected-sidebar-title h2 {
  font-size: var(--kj-heading-size-compact);
  margin-bottom: 12px;
}

@media screen and (max-width: 767px) {
  .kosova-front .most-popular h2,
  .intervista-front .most-popular h2,
  .kultura-front .most-popular h2,
  .lexuarat-front .most-popular h2 {
    font-size: var(--kj-heading-size);
  }
}

.selected-sidebar-title .selected-koha {
  display: none;
}

.kj-heading--phrase,
.kj-heading,
.s-result {
  text-transform: none;
}

.kj-heading--on-dark,
.kj-heading--webtv,
.forum-mobile .forum-slider-title h2 {
  color: var(--color-white);
}

.kj-heading-block {
  margin-bottom: 4px;
}

.kj-heading__sub {
  margin: -4px 0 21.6px;
  max-width: 608px;
  font-family: var(--primaryFont);
  font-size: var(--kj-subheading-size);
  font-weight: var(--kj-subheading-weight);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  opacity: 0.62;
}

.kj-heading__sub p {
  margin: 0;
}

.kj-heading .sporti {
  color: var(--green);
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  /*row-gap: 25px;*/
}

@media screen and (min-width: 767px) {
  .grid-container {
    row-gap: 25px;
  }
}

.league-title {
  width: 100%;
  color: var(--black);
  font-weight: 700;
  border-radius: 5px;
  letter-spacing: -0.04em;
  line-height: 35px;
}

.league-title:first-of-type {
  margin-top: -10px;
}

.league-title::after {
  content: "";
  width: 8%;
  display: block;
  height: 1px;
  background-color: var(--caption);
  margin-top: 3px;
}

.grid-container-sporti {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  padding-inline-end: 50px;
  row-gap: 25px;
}
@media screen and (max-width: 767px) {
  .grid-container-sporti {
    padding-inline-end: 0px;
  }
}

/* CSS for mobile */

.kj-card.kj-card--listing {
  width: calc(25% - 10px); /* Three columns per row */
}

.kj-kicker-group {
  margin-bottom: 5px;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
}

.kj-kicker--plain {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-decoration: underline;
}

.kj-kicker--pill {
  color: var(--color-white);
  font-family: var(--primaryFont);
  background-color: var(--black);
  font-size: 14px;
  letter-spacing: -0.045em;
  border-radius: 3px;
  padding: 1px 4px;
  text-transform: uppercase;
  margin-top: 2px;
  margin-inline-end: 5px;
  text-decoration: none;
}

@media (max-width: 659px) {
  .kj-kicker--pill {
    font-size: 11px;
  }
}
.kj-meta__date--listing {
  font-family: var(--primaryFont);
  font-weight: 500;
  margin-top: 0px;
  text-transform: uppercase;
}

/* For smaller screens */
@media screen and (max-width: 768px) {
  .kj-card.kj-card--listing {
    width: calc(50% - 10px); /* Two items per row */
  }
}

/* For even smaller screens */
@media screen and (max-width: 480px) {
  .kj-card.kj-card--listing {
    width: 100%; /* Single item per row */
  }
}

/* Outline archive CTA (sidebar “Shiko të gjitha”, category next page, etc.) */
.kj-outline-cta,
.kj-outline-cta:visited {
  display: block;
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid var(--color-blue);
  font-family: var(--primaryFont);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-blue);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .kj-outline-cta:hover {
    color: var(--color-white);
    background: var(--color-blue);
  }
}

.kj-outline-cta:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

/*
 * Image frames: neutral placeholder while the photo loads, then a short
 * fade-in. The placeholder is pure CSS. The fade is gated by html.kj-img-fade,
 * which the inline head script adds; site-chrome.js adds .kj-img-loaded on each
 * image's load event, so without JS nothing is ever hidden. Eager (above the
 * fold / LCP) images are never gated.
 */
:is(
  .kj-card__media,
  .kj-home-strip__media,
  .kj-home-list__media,
  .kj-layout-media,
  .kj-layout-stack-item__media,
  .kj-layout-thumb-row__media,
  .kj-front-latest__media,
  .kj-teaser__media,
  .kj-inline-related__thumb,
  .sidebar-selected__thumb,
  .sidebar-feed__thumb,
  .kj-cat-thumb
) {
  background-color: color-mix(
    in srgb,
    var(--text-primary) 6%,
    var(--bg-primary)
  );
}

html.kj-img-fade
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  )
  img[loading="lazy"]:not(.kj-img-loaded) {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html.kj-img-fade
    :is(
      .kj-card__media,
      .kj-home-strip__media,
      .kj-home-list__media,
      .kj-layout-media,
      .kj-layout-stack-item__media,
      .kj-layout-thumb-row__media,
      .kj-front-latest__media,
      .kj-teaser__media,
      .kj-inline-related__thumb,
      .sidebar-selected__thumb,
      .sidebar-feed__thumb,
      .kj-cat-thumb
    )
    img.kj-img-loaded:not(.kj-img-instant) {
    /* No "to": it settles on whatever opacity the card's own rules give it. */
    animation: kj-img-in 260ms var(--ease-out);
  }
}

@keyframes kj-img-in {
  from {
    opacity: 0;
  }
}

/*
 * Loading placeholder: the KJ wordmark crossfades between the text colour and
 * the brand blue while a lazy image is still loading. Shown only when the frame
 * holds an unloaded lazy image (same gate as the opacity rule above), so it
 * disappears the moment .kj-img-loaded lands and never appears without JS.
 */
html.kj-img-fade
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  ):has(img[loading="lazy"]:not(.kj-img-loaded)) {
  position: relative;
}

html.kj-img-fade
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  ):has(img[loading="lazy"]:not(.kj-img-loaded))::before,
html.kj-img-fade
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  ):has(img[loading="lazy"]:not(.kj-img-loaded))::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34%;
  max-width: 56px;
  aspect-ratio: 113.81 / 87.1;
  pointer-events: none;
  -webkit-mask: url("../images/kj-mark.svg") center / contain no-repeat;
  mask: url("../images/kj-mark.svg") center / contain no-repeat;
}

html.kj-img-fade
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  ):has(img[loading="lazy"]:not(.kj-img-loaded))::before {
  background-color: color-mix(in srgb, var(--text-primary) 70%, transparent);
}

html.kj-img-fade
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  ):has(img[loading="lazy"]:not(.kj-img-loaded))::after {
  background-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
  opacity: 0;
}

html.kj-img-fade[data-theme="dark"]
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  ):has(img[loading="lazy"]:not(.kj-img-loaded))::before {
  background-color: rgb(255 255 255 / 0.75);
}

html.kj-img-fade[data-theme="dark"]
  :is(
    .kj-card__media,
    .kj-home-strip__media,
    .kj-home-list__media,
    .kj-layout-media,
    .kj-layout-stack-item__media,
    .kj-layout-thumb-row__media,
    .kj-front-latest__media,
    .kj-teaser__media,
    .kj-inline-related__thumb,
    .sidebar-selected__thumb,
    .sidebar-feed__thumb,
    .kj-cat-thumb
  ):has(img[loading="lazy"]:not(.kj-img-loaded))::after {
  background-color: rgb(255 255 255 / 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  html.kj-img-fade
    :is(
      .kj-card__media,
      .kj-home-strip__media,
      .kj-home-list__media,
      .kj-layout-media,
      .kj-layout-stack-item__media,
      .kj-layout-thumb-row__media,
      .kj-front-latest__media,
      .kj-teaser__media,
      .kj-inline-related__thumb,
      .sidebar-selected__thumb,
      .sidebar-feed__thumb,
      .kj-cat-thumb
    ):has(img[loading="lazy"]:not(.kj-img-loaded))::before {
    animation: kj-logo-fade-a 1.6s ease-in-out infinite;
  }

  html.kj-img-fade
    :is(
      .kj-card__media,
      .kj-home-strip__media,
      .kj-home-list__media,
      .kj-layout-media,
      .kj-layout-stack-item__media,
      .kj-layout-thumb-row__media,
      .kj-front-latest__media,
      .kj-teaser__media,
      .kj-inline-related__thumb,
      .sidebar-selected__thumb,
      .sidebar-feed__thumb,
      .kj-cat-thumb
    ):has(img[loading="lazy"]:not(.kj-img-loaded))::after {
    animation: kj-logo-fade-b 1.6s ease-in-out infinite;
  }
}

@keyframes kj-logo-fade-a {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes kj-logo-fade-b {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@media print {
  html.kj-img-fade img[loading="lazy"]:not(.kj-img-loaded) {
    opacity: 1 !important;
  }
}

/* Visually hidden, still announced (live-region status lines). */
.kj-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Skeleton placeholders for infinite scroll (archive-infinite.js,
 * webtv-category.js). Decorative; the live-region status carries the text.
 * The shimmer is a gradient sweep that is switched off under reduced motion.
 */
.kj-skeleton {
  --kj-skel-base: color-mix(in srgb, var(--text-primary) 7%, var(--bg-primary));
  --kj-skel-hi: color-mix(in srgb, var(--text-primary) 13%, var(--bg-primary));
  pointer-events: none;
}

.kj-skeleton .kj-skel {
  display: block;
  border-radius: 4px;
  background-color: var(--kj-skel-base);
  background-image: none;
}

.kj-skeleton .kj-skel--line {
  height: 0.9em;
  margin-top: 0.55em;
}

.kj-skeleton .kj-skel--line:first-child {
  margin-top: 0;
}

.kj-skeleton .kj-skel--short {
  width: 62%;
}

@media (prefers-reduced-motion: no-preference) {
  .kj-skeleton .kj-skel {
    background-image: linear-gradient(
      90deg,
      transparent 30%,
      var(--kj-skel-hi) 50%,
      transparent 70%
    );
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: kj-skel-shimmer 1.4s linear infinite;
  }
}

@keyframes kj-skel-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

/*
 * "N lajme të reja ↑" pill (site-chrome.js initNewStories). The region is a
 * polite live region that is always present and empty; only the pill inside
 * takes pointer events. --kj-ns-top is set by JS to sit under the header (or
 * near the top edge when the header has scrolled away).
 */
.kj-new-stories {
  position: fixed;
  z-index: 10040;
  top: var(--kj-ns-top, 72px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-inline: 12px;
  pointer-events: none;
}

.kj-new-stories:empty {
  display: none;
}

.kj-new-stories__pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--bg-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}

.kj-new-stories__btn,
.kj-new-stories__close {
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--primaryFont);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kj-new-stories__btn {
  padding: 10px 6px 10px 16px;
  border-radius: 999px 0 0 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.kj-new-stories__close {
  padding: 10px 14px 10px 8px;
  border-radius: 0 999px 999px 0;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
}

.kj-new-stories__btn:focus-visible,
.kj-new-stories__close:focus-visible {
  outline: 2px solid var(--bg-primary);
  outline-offset: -4px;
}

.kj-new-stories__btn:active,
.kj-new-stories__close:active {
  opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
  .kj-new-stories__close:hover {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kj-new-stories__pill {
    transition:
      opacity 200ms var(--ease-out),
      transform 200ms var(--ease-out);
  }

  @starting-style {
    .kj-new-stories__pill {
      opacity: 0;
      transform: translateY(-8px) scale(0.96);
    }
  }
}

@media print {
  .kj-new-stories {
    display: none !important;
  }
}