.all-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}

.search-wrap{
    display:flex;
    justify-content:flex-end;
    margin-bottom:1.5rem;
    gap:.75rem;
    flex-wrap:wrap;
    align-items:stretch;
}

.search-input{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.75rem 1rem;
    width:min(520px, 100%);
}

.search-input i{
    color:var(--text-muted);
}

.search-input input{
    background:transparent;
    border:none;
    outline:none;
    color:var(--text-main);
    width:100%;
    font-size:1rem;
}

.category-filter{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.75rem 1rem;
    min-width:190px;
}

.category-filter i{
    color:var(--text-muted);
}

.category-filter select{
    background:transparent;
    border:none;
    outline:none;
    color:var(--text-main);
    width:100%;
    font-size:.95rem;
    cursor:pointer;
}

.category-filter select option {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    padding: 10px;
}

@media (max-width: 900px){
    .all-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .search-wrap{
        justify-content:flex-start;
    }
}

.template-card .card-image{
    position:relative;
}

.card-badge{
    position:absolute;
    top:12px;
    left:12px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
    color:#fff;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
}

.card-badge-paid{
    background:linear-gradient(135deg, #f97316, #fb923c);
}

.new-badge{
    position:absolute;
    top:12px;
    right:12px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    backdrop-filter:blur(8px);
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    z-index:6;
    pointer-events:none;
}

/* ---------- TEMPLATE BADGE (from admin) ---------- */
.template-badge{
    position:absolute;
    top:12px;
    right:12px;
    padding:5px 12px;
    border-radius:999px;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 4px 18px rgba(0,0,0,.4);
    backdrop-filter:blur(8px);
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    z-index:7;
    pointer-events:none;
    animation:badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse{
    0%,100%{ box-shadow:0 4px 18px rgba(0,0,0,.4); }
    50%{ box-shadow:0 4px 24px rgba(0,255,135,.25); }
}

/* ---------- OTT SECTIONS VIEW ---------- */
#sectionsView{
    margin-bottom:2rem;
}

.ott-section{
    margin-bottom:2.5rem;
}

.ott-section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1rem;
    padding:0 0.25rem;
}

.ott-section-title{
    font-size:1.4rem;
    font-weight:700;
    color:var(--text-main);
    display:flex;
    align-items:center;
    gap:.6rem;
}

.ott-section-title::before{
    content:'';
    display:inline-block;
    width:4px;
    height:1.2em;
    border-radius:4px;
    background:linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
}

.ott-section-count{
    font-size:.85rem;
    color:var(--text-muted);
    font-weight:400;
}

/* Horizontal scroll row for named sections */
.ott-scroll-wrapper{
    position:relative;
}

.ott-scroll-row{
    display:flex;
    gap:1.25rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:.75rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.12) transparent;
}

.ott-scroll-row::-webkit-scrollbar{
    height:6px;
}

.ott-scroll-row::-webkit-scrollbar-track{
    background:transparent;
}

.ott-scroll-row::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:999px;
}

/* Cards inside scroll rows get fixed width for horizontal scrolling */
.ott-scroll-row .template-card{
    flex:0 0 320px;
    scroll-snap-align:start;
    transition:transform .25s ease, box-shadow .25s ease;
}

.ott-scroll-row .template-card:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 12px 40px rgba(0,0,0,.45);
}

/* Scroll navigation arrows */
.ott-scroll-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-60%);
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(8px);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10;
    opacity:0;
    transition:opacity .2s ease;
    font-size:.85rem;
}

.ott-scroll-wrapper:hover .ott-scroll-arrow{
    opacity:1;
}

.ott-scroll-arrow:hover{
    background:rgba(0,0,0,.85);
    border-color:rgba(255,255,255,.3);
}

.ott-scroll-arrow.ott-arrow-left{
    left:-8px;
}

.ott-scroll-arrow.ott-arrow-right{
    right:-8px;
}

.ott-divider{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
    margin:1rem 0 2rem;
}

@media (max-width:768px){
    .ott-scroll-row .template-card{
        flex:0 0 260px;
    }
    .ott-section-title{
        font-size:1.15rem;
    }
    .ott-scroll-arrow{
        display:none;
    }
}

@media (max-width:480px){
    .ott-scroll-row .template-card{
        flex:0 0 220px;
    }
}