/* FPO Category Carousel (Elementor Free friendly)
 * - Dark mode friendly
 * - No external dependencies
 */

.fpo-cat-carousel{position:relative;margin-top:18px}
.fpo-cat-carousel__track{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:6px 4px 14px;scroll-padding-left:4px;scroll-padding-right:44px;-webkit-overflow-scrolling:touch}
.fpo-cat-carousel__track:focus{outline:none}
.fpo-cat-carousel__track::-webkit-scrollbar{height:10px}
.fpo-cat-carousel__track::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:999px}
.fpo-cat-carousel__track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}

.fpo-cat-card{scroll-snap-align:start;flex:0 0 280px;min-width:280px;border-radius:18px;overflow:hidden;background:#0b1324;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.35);text-decoration:none;position:relative}
.fpo-cat-card:hover{transform:translateY(-2px)}
.fpo-cat-card{transition:transform .2s ease, box-shadow .2s ease}

.fpo-cat-card__img{height:170px;background:#101a33 center/cover no-repeat;position:relative}
.fpo-cat-card__overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(5,10,20,.95) 0%, rgba(5,10,20,.6) 45%, rgba(5,10,20,0) 100%)}

.fpo-cat-card__body{padding:14px 14px 16px}
.fpo-cat-card__title{font-size:18px;margin:0 0 6px;line-height:1.2}
.fpo-cat-card__tag{font-size:13px;opacity:.85;margin:0}

.fpo-cat-carousel__nav{position:absolute;top:72px;right:8px;display:flex;gap:8px}
.fpo-cat-carousel__btn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(10,18,34,.55);backdrop-filter:blur(6px);color:#fff;cursor:pointer}
.fpo-cat-carousel__btn:hover{background:rgba(10,18,34,.8)}

@media (max-width: 640px){
  .fpo-cat-card{flex-basis:78vw;min-width:78vw}
  .fpo-cat-carousel__nav{display:none}
}


.fpo-cat-card:hover{box-shadow:0 16px 36px rgba(0,0,0,.40)}
.fpo-cat-card__badge{
  position:absolute;
  left:12px;
  top:12px;
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  background:var(--fpo-accent);
  color:#ffffff;
  letter-spacing:.02em;
}