/* ========================================
   Wrapper
======================================== */

.cce-wrapper{
    width:100%;
    position:relative;
}

.cce-title{
    margin:0 0 25px;
    font-size:32px;
    font-weight:700;
    line-height:1.3;
}

/* ========================================
   Search
======================================== */

.cce-search-wrapper{
    margin-bottom:25px;
}

.cce-search-input{
    width:100%;
    height:52px;
    border:1px solid #ddd;
    border-radius:8px;
    padding:0 15px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.cce-search-input:focus{
    border-color:#2271b1;
}
/* ========================================
   Grid Masonry Layout
======================================== */

.cce-accordion-grid{
    column-count:2;
    column-gap:20px;
}

.cce-country-item{
    display:inline-block;
    width:100%;
    margin-bottom:20px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
}

@media (max-width:767px){

    .cce-accordion-grid{
        column-count:1;
    }

}
/* ========================================
   Accordion Item
======================================== */

.cce-country-item{
    border:1px solid #e5e5e5;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}

/* ========================================
   Header
======================================== */

.cce-country-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:16px 18px;

    border:none;
    background:#fff;

    cursor:pointer;

    font-size:15px;
    font-weight:600;

    text-align:left;

    transition:.3s;
}

.cce-country-header:hover{
    background:#f8f8f8;
}

.cce-country-header.active{
    background:#c90e0e57;
}

.cce-country-name{
    flex:1;
}

.cce-channel-count{
    font-size:13px;
    opacity:.7;
}

.cce-toggle-icon{
    width:24px;
    text-align:center;
    font-size:18px;
    font-weight:700;
}

/* ========================================
   Content
======================================== */

.cce-country-content{
    display:none;
    border-top:1px solid #eee;
}

.cce-country-content.active{
    display:block;
}

/* ========================================
   Channels
======================================== */

.cce-channel-list{
    margin:0;
    padding:15px 20px;
    list-style:none;
}

.cce-channel-item{
    padding:8px 0;
    border-bottom:1px solid #f2f2f2;
    font-size:14px;
    line-height:1.5;
}

.cce-channel-item:last-child{
    border-bottom:none;
}

.cce-no-channels{
    padding:20px;
    font-size:14px;
    opacity:.7;
}

/* ========================================
   Empty State
======================================== */

.cce-empty{
    padding:20px;
    border:1px solid #eee;
    border-radius:10px;
}

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

@media (max-width:767px){

    .cce-grid-2{
        grid-template-columns:1fr;
    }

    .cce-title{
        font-size:24px;
    }

}

.cce-country-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:40px;
}

.cce-channel-card {
    background: transparent;
    border: 1px solid #ff0000;
    border-radius: 50px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 17px;
}

.cce-icon{
    font-size:20px;
}

@media(max-width:1024px){

    .cce-country-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:767px){

    .cce-country-grid{
        grid-template-columns:1fr;
    }

}