/*
 * Home listing rails — independent 8-item rows.
 * Scope: “Njoftimet më të njohura” + “Njoftime Premium” only.
 * Each row is its own horizontal scroll container, so swiping one row never
 * moves the other. Card visuals, paid ordering, badges and payment logic stay
 * untouched.
 */
.njf-app-home .njf-home-independent-rows{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  max-width:100%!important;
}
.njf-app-home .njf-home-independent-rows--popular{gap:16px!important}
.njf-app-home .njf-home-independent-rows--premium{gap:18px!important}

.njf-app-home .njf-home-independent-row{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none!important;
}
.njf-app-home .njf-home-independent-row::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

/* Popular: preserve the current two-across mobile card proportions, but place
   the two groups of eight into two genuinely separate rails. */
.njf-app-home .njf-visual-track.njf-home-independent-row--popular{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:16px!important;
  margin:0!important;
  padding:3px 2px 10px!important;
}
.njf-app-home .njf-home-independent-row--popular>.njf-visual-card{
  flex:0 0 calc((100% - 48px)/4)!important;
  width:calc((100% - 48px)/4)!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:normal!important;
}

/* Premium: desktop keeps the same four-card width as the existing Premium
   grid; mobile keeps the large one-card-plus-peek Premium treatment. */
.njf-app-home .njf-premium-track.njf-home-independent-row--premium{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:16px!important;
  margin:0!important;
  padding:3px 2px 10px!important;
}
.njf-app-home .njf-home-independent-row--premium>.njf-premium-card{
  flex:0 0 calc((100% - 48px)/4)!important;
  width:calc((100% - 48px)/4)!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:normal!important;
}

@media(max-width:780px){
  .njf-app-home .njf-home-independent-rows--popular{gap:12px!important}
  .njf-app-home .njf-home-independent-rows--premium{gap:16px!important}

  .njf-app-home .njf-visual-track.njf-home-independent-row--popular{
    gap:10px!important;
    margin:0!important;
    padding:2px 0 9px!important;
  }
  .njf-app-home .njf-home-independent-row--popular>.njf-visual-card{
    flex:0 0 calc((100% - 10px)/2)!important;
    width:calc((100% - 10px)/2)!important;
    border-radius:16px!important;
  }
  .njf-app-home .njf-home-independent-row--popular .njf-visual-card__media{
    aspect-ratio:1.18/1!important;
  }
  .njf-app-home .njf-home-independent-row--popular .njf-visual-card__body{
    min-height:124px!important;
    padding:11px 10px 12px!important;
  }
  .njf-app-home .njf-home-independent-row--popular .njf-visual-card__body>strong{
    min-height:40px!important;
    font-size:15px!important;
    line-height:1.28!important;
  }

  .njf-app-home .njf-premium-track.njf-home-independent-row--premium{
    gap:12px!important;
    margin:0 -18px!important;
    padding:2px 18px 8px!important;
  }
  .njf-app-home .njf-home-independent-row--premium>.njf-premium-card{
    flex:0 0 76%!important;
    width:76%!important;
    max-width:310px!important;
  }
}

@media(max-width:620px){
  .njf-app-home .njf-premium-track.njf-home-independent-row--premium{
    gap:14px!important;
    padding:2px 28px 8px 18px!important;
  }
  .njf-app-home .njf-home-independent-row--premium>.njf-premium-card{
    flex:0 0 82vw!important;
    width:82vw!important;
    max-width:390px!important;
    border-radius:22px!important;
  }
}

@media(max-width:390px){
  .njf-app-home .njf-visual-track.njf-home-independent-row--popular{gap:8px!important}
  .njf-app-home .njf-home-independent-row--popular>.njf-visual-card{
    flex-basis:calc((100% - 8px)/2)!important;
    width:calc((100% - 8px)/2)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .njf-app-home .njf-home-independent-row{scroll-behavior:auto!important}
}

/* ===== v57.59.64 — Popular cards: edge-to-edge mobile rail + 1px card gap ===== */
@media(max-width:780px){
  .njf-app-home .njf-visual-track.njf-home-independent-row--popular{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding-left:0!important;
    padding-right:0!important;
    gap:1px!important;
  }
  .njf-app-home .njf-home-independent-row--popular>.njf-visual-card{
    flex:0 0 calc((100% - 1px)/2)!important;
    width:calc((100% - 1px)/2)!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
}
@media(max-width:390px){
  .njf-app-home .njf-visual-track.njf-home-independent-row--popular{gap:1px!important}
  .njf-app-home .njf-home-independent-row--popular>.njf-visual-card{
    flex-basis:calc((100% - 1px)/2)!important;
    width:calc((100% - 1px)/2)!important;
  }
}

/* ===== v57.59.68 — Premium mobile rail: remove the blank strip after the peek card =====
 * Keep the existing Premium card size, spacing, two independent rows and all
 * visual/payment logic unchanged. Only let the Premium rail use the full
 * viewport width on mobile so the next partially visible card is clipped at
 * the screen edge, not at the inner .njf-container edge. */
@media(max-width:620px){
  .njf-app-home .njf-home-independent-rows--premium{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
  .njf-app-home .njf-premium-track.njf-home-independent-row--premium{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}