@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&family=Vazirmatn:wght@400;500;600;700;800&display=swap');
@font-face{font-family:Picoopic;src:url('/fonts/woff2/picoopic-Regular.woff2') format('woff2'),url('/fonts/woff/picoopic-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Picoopic;src:url('/fonts/woff2/picoopic-Bold.woff2') format('woff2'),url('/fonts/woff/picoopic-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
.vylo-vf-root,.vylo-vf-root *{box-sizing:border-box!important}
.vylo-vf-root{--vylo-accent:#FF2B2B;--vylo-red:#C00000;position:relative;width:100%;padding:22px 0;background:#000;color:#fff;border-top:1px solid #161616;border-bottom:1px solid #161616;direction:rtl;text-align:right;font-family:Picoopic,Vazirmatn,sans-serif;user-select:none}
.vylo-vf-container{max-width:1280px;margin:auto;padding:0 20px}
.vylo-vf-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid #181818}
.vylo-vf-title-group{display:flex;align-items:center;gap:8px}.vylo-vf-dot{width:7px;height:7px;border-radius:50%;background:var(--vylo-accent);box-shadow:0 0 7px var(--vylo-accent);display:inline-block;flex:none}
.vylo-vf-title{margin:0!important;font-size:15px;font-weight:700;color:#fff;line-height:1.3}.vylo-vf-subtitle{display:none}
.vylo-vf-all{font-size:11px;color:#777;text-decoration:none;display:inline-flex;gap:4px;align-items:center;transition:color .2s ease}.vylo-vf-all:hover,.vylo-vf-all.is-active{color:#fff}.vylo-vf-all span{color:var(--vylo-accent)}
.vylo-vf-grid{display:grid;grid-template-columns:repeat(var(--vylo-cols),1fr);gap:8px}
.vylo-vf-card{position:relative;height:76px;border-radius:10px;background:#070707;border:1px solid #1b1b1b;padding:9px 11px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:#fff;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.vylo-vf-card:hover{border-color:rgba(255,43,43,.55);box-shadow:0 4px 14px rgba(192,0,0,.18);background:#0d0d0d}
.vylo-vf-card-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 55%);z-index:1;pointer-events:none}
.vylo-vf-card-top{position:absolute;top:7px;left:8px;right:8px;z-index:3;display:flex;align-items:center;justify-content:flex-start}
.vylo-vf-badge{padding:2px 6px;border-radius:999px;background:rgba(69,10,10,.45);border:1px solid rgba(239,68,68,.22);color:var(--vylo-accent);font:700 9px/1 Picoopic,Vazirmatn,sans-serif}
.vylo-vf-card-bottom{position:relative;z-index:3;width:100%;display:flex;align-items:center;justify-content:center;margin-top:5px}
.vylo-vf-card-title{display:block;font-size:13px;font-weight:700;color:#fff;line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .2s ease}
.vylo-vf-card:hover .vylo-vf-card-title{color:#f87171}
.vylo-vf-laser{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--vylo-red);opacity:0;transition:opacity .2s ease;z-index:5}
.vylo-vf-card:hover .vylo-vf-laser,.vylo-vf-card.is-active .vylo-vf-laser{opacity:1}
.vylo-vf-card.is-active{border-color:var(--vylo-accent);background:#130606;box-shadow:0 0 0 1px rgba(255,43,43,.10),0 4px 16px rgba(192,0,0,.20)}
.vylo-vf-card.is-active .vylo-vf-card-title{color:#ff5555}
.vylo-vf-card.is-disabled{opacity:.4;cursor:not-allowed}.vylo-vf-card.is-disabled:hover{box-shadow:none;background:#070707}
@media(max-width:1023px){.vylo-vf-grid{grid-template-columns:repeat(var(--vylo-cols-t),1fr)}}
@media(max-width:639px){.vylo-vf-root{padding:16px 0}.vylo-vf-container{padding:0 12px}.vylo-vf-header{margin-bottom:9px;padding-bottom:7px}.vylo-vf-grid{grid-template-columns:repeat(var(--vylo-cols-m),1fr);gap:6px}.vylo-vf-card{height:54px;padding:7px 8px;border-radius:8px}.vylo-vf-title{font-size:14px}.vylo-vf-all{font-size:10px}.vylo-vf-badge{font-size:8px;padding:2px 5px}.vylo-vf-card-title{font-size:12px}.vylo-vf-card-top{top:5px;left:6px;right:6px}}
/* =========================================================
   VYLO — COMBINED FILTERS
========================================================= */

.vylo-category-filter {
    margin-top: 12px;
}

.vylo-category-filter .vylo-vf-card {
    height: 64px;
}

.vylo-category-filter .vylo-vf-card-title {
    font-size: 13px;
}


/* =========================================================
   Active filter indicator
========================================================= */

.vylo-vf-card.is-active {
    position: relative;
}

.vylo-vf-card.is-active::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vylo-accent);
    box-shadow: 0 0 8px var(--vylo-accent);
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 639px) {

    .vylo-category-filter {
        margin-top: 8px;
    }

    .vylo-category-filter .vylo-vf-card {
        height: 52px;
    }

}