*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#f5f5f5;
    color:#222;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

/* START HEADER */

.cc-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}

.cc-header{
    height:100px;
    display:flex;
    align-items:center;
}

/* glass blur header */

/*.cc-header {
    position: sticky;
    top: 0;
    z-index: 999;

    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}*/


.logo a{
    font-size:28px;
    font-weight:bold;
    color:#ffffff;
    margin: 0;
    letter-spacing: 1px;
    display:flex;
    align-items:center;
    gap:10px;
    padding: 0;
    cursor: pointer;
}

.logo-img{
    width:40px;
    height:40px;
    object-fit:contain;
    border-radius: 50%;
    margin: 0;
}

.cc-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:20px;
    flex-wrap:nowrap;
    position:relative;
}

.cc-nav a {
    color: #e2e8f0;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.cc-dropdown{
    position:absolute;
    right:0;
    top:50px;

    width:180px;

    background:rgba(15, 23, 42, 0.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;

    display:none;
    flex-direction:column;

    overflow:hidden;
    z-index:9999;

    box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

.cc-dropdown a{
    display:block;
    padding:10px 12px;

    color:#e2e8f0;
    text-decoration:none;

    font-size:14px;

    transition:0.2s ease;
}

.cc-dropdown a:hover{
    background:rgba(59,130,246,0.25);
    color:#ffffff;
    transform:translateX(3px);
}

.cc-nav a:hover {
    background: #334155;
    color: #ffffff;
}

.cc-user-avatar{
    display:flex;
    align-items:center;
    margin-left:10px;
}

.cc-user-avatar img{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,0.15);
    transition:0.3s ease;
    cursor:pointer;
}

.cc-user-avatar img:hover{
    transform:scale(1.05);
    border-color:#3b82f6;
}

.cc-user-wrapper{
    position:relative;
}

.nav-right{
    display:flex;
    align-items:center;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:16px;
}
.cc-avatar-box{
    display:flex;
    align-items:center;
    cursor:pointer;
    justify-content:center;
    transition:0.3s ease;
}

.cc-avatar-box:hover{
    transform:scale(1.05);
}

.cc-avatar-img{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,0.15);
    transition:0.3s ease;
}

.cc-avatar-img:hover{
    border-color:#3b82f6;
}

.home-feed {
    display:flex;
    justify-content: center;
}

/* ===============================
   Start MOBILE BOTTOM NAV CSS
================================ */

.cc-mobile-nav{
    display:none;
}


  /*=====================================
  Start tablet, mobile header system css
  ======================================*/
  
/*.cc-mobile-header{
    display:none;
}*/

/*@media (max-width: 600px){

    .cc-mobile-header{
        padding:8px 10px;
    }

    .mobile-top-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .mobile-search{
        margin-top:8px;
    }

    .mobile-search .search-wrapper{
        width:100%;
    }
}*/

/*@media(max-width: 768px){

    .cc-nav{
        display:none;
    }

    .cc-mobile-header{
        display:block;
        padding:10px 12px;
    }

    .mobile-top-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .mobile-right{
        display:flex;
        gap:10px;
        align-items:center;
    }

    .mobile-search{
        margin-top:10px;
    }

    .mobile-search .search-wrapper{
        width:100%;
    }
}*/


/*@media (min-width: 601px) and (max-width: 900px){

    .cc-mobile-header{
        padding:10px 15px;
    }

    .mobile-top-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .mobile-search .search-wrapper{
        width:70%;
        margin:0 auto;
    }

    .cc-mobile-header{
        padding-bottom:5px;
    }
}

.cc-mobile-header{
    display:none;
}

.cc-nav{
    display:flex;
}*/
   
/*@media (max-width: 768px){

    .cc-nav{
        display:none !important;
    }

    .cc-mobile-header{
        display:block;
        padding:8px 12px;
    }

    .mobile-top-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
    }

    .mobile-right{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .mobile-search{
        margin-top:6px;
        width:100%;
        display:flex;
        justify-content:center;
    }

    .mobile-search .search-wrapper{
        width:95%;
    }

    .cc-header{
        height:auto !important;
        padding:6px 0;
    }
}*/

/*@media (min-width: 601px) and (max-width: 768px){

    .mobile-search .search-wrapper{
        width:75%;
    }

    .mobile-top-row{
        padding:0 5px;
    }
}*/

/*@media (min-width: 601px) and (max-width: 768px){

    .cc-mobile-nav{
        position:fixed !important;
        bottom:0;
        top:auto !important;
    }

    body{
        padding-bottom:60px;
    }
}*/

/*@media (max-width: 768px){

    .nav-right{
        display:flex !important;
        justify-content:flex-end;
        align-items:center;
        gap:10px;
    }

    .cc-bell-wrapper,
    .cc-user-wrapper{
        display:flex !important;
    }
}*/


/* pc version header mobile, tablet jonno hide */
/*@media (max-width: 768px){

    .cc-nav{
        display:none !important;
    }

    .cc-admin-top{
        display:none !important;
    }
}*/

  /*=====================================
   End tablet, mobile header system css
  ======================================*/

/* =========================
   MOBILE VIEW
========================= */
@media(max-width:768px){

    .cc-mobile-nav{
        position:fixed;
        bottom:0;
        left:0;

        width:100%;

        background:rgba(15,23,42,0.96);

        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);

        border-top:1px solid rgba(255,255,255,0.08);

        display:flex;
        align-items:center;
        justify-content:space-around;

        padding:10px 0;

        z-index:99999;

    }

    .cc-mobile-nav a{
        color:#e2e8f0;
        text-decoration:none;

        font-size:13px;
        font-weight:500;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        transition:0.3s ease;
    }

    .cc-mobile-nav a:hover{
        color:#3b82f6;
        transform:translateY(-2px);
    }

    /* Desktop top nav hide on mobile */

    .nav-left{
        display:none;
    }

}

@media(max-width:992px){
    .cc-mobile-nav{
        bottom:0;
        left:0;

        width:80%;
    }
    
    .cc-admin-search{
        width:300px;
    }
    
    .cc-search-box{
        width:300px;
    }
    

}

@media(max-width:601px){
    .cc-mobile-nav{
        bottom:0;
        left:0;

        width:100%;
    }
    
    .cc-search-box{
        width:200px;
    }
}

@media(max-width:768px){
    .home-feed {
        
        font-size: 11px;
        margin-top: 5px;
    }
}

/* ===============================
   End MOBILE BOTTOM NAV CSS
================================ */


/* Start header search box css */

.cc-search-box{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    justify-content:center;
    align-items:center;
}

.search-wrapper{
    position:relative;
    width:420px;
}

.search-wrapper input{
    width:100%;
    padding:10px 38px 10px 14px;
    border-radius:25px;
    border:1px solid rgba(255,255,255,0.1);
    background:#1e293b;
    color:#fff;
    outline:none;
}

/* admin search box nav top css */

.cc-admin-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0;        /* IMPORTANT: remove extra space */
    margin:0;         /* safety */
    gap:5px;         /* reduce gap */
    height:53px;      /* fixed compact height */
}

.cc-admin-top .logo{
    margin:0;
    padding:0;
}

.cc-admin-search{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom: 0;
    margin-top: 16px;
    margin-right: 15%;
}

.cc-admin-search .search-wrapper{
    width:420px;
}

.search-icon{
    position:absolute;
    right:10px;
    top:40%;
    transform:translateY(-50%);
    font-size:22px;
    color:#94a3b8;
    cursor: pointer;
    align-items: center;
}

.cc-search-box input{
    width:100%;
    max-width:420px;
    padding:10px 38px 10px 14px;
    border-radius:25px;
    border:1px solid rgba(255,255,255,0.1);
    background:#1e293b;
    color:#fff;
    outline:none;
    display:block;
}

.cc-search-box input::placeholder{
    color:#94a3b8;
}

.search-results{
    position:absolute;
    top:55px;
    width:100%;
    max-width:400px;
    background:#0f172a;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    display:none;
    flex-direction:column;
    z-index:99999;
}

.search-item{
    padding:10px;
    cursor:pointer;
    color:#e2e8f0;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.search-item:hover{
    background:#1e293b;
}

@media(max-width:601px){

    .cc-header{
        height:auto;
        padding:10px 0;
    }

    .cc-nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .cc-search-box{
        position:static;
        transform:none;
        width:50%;
        order:3;
        left: 165px;
        

        margin-top:-40px;
        margin-bottom: 35px;
    }
    
    .search-icon {
        right: 10px;
    }

    .search-wrapper{
        width:95%;
        max-width:none;
    }

    .search-results{
        width:95%;
        max-width:none;
    }

}

@media(max-width:768px){

    .cc-header{
        height:auto;
        padding:8px 0;
    }

    .container{
        display:flex;
        flex-direction:column;
    }

    .cc-nav{
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:10px;
    }

    .nav-right{
        margin-left:auto;
    }

    .cc-search-box{
        position:static;
        transform:none;
        width:100%;
        order:99;
        margin-top:8px;
    }

    .search-wrapper{
        width:100%;
    }

    .search-results{
        width:100%;
        max-width:none;
    }
}

@media(min-width:600px) and (max-width:768px){
    .search-wrapper{
        width:420px;
    }
}

/* End header search box css */

/* End header */

/* VIDEO CARD */

.video-card{
    background:#e5e7eb;
    border-radius:16px;
    margin:10px 0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 8px 25px rgba(0,0,0,0.25);
    transition:all 0.25s ease;
}

.video-card:hover{
    /*transform:translateY(-3px);*/
    box-shadow:0 12px 35px rgba(0,0,0,0.4);
}

.video-title{
    font-size: 17px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin-top: 10px;
}

.creator-sub-btn {
    display: flex;
    align-items: center;
    justify-content:space-between;
    position:absolute;
}

.views-reacton-btn {
    display: flex;
    align-items: center;
    justify-content:space-between;
    position: relative;
    margin-top: 65px;
}

.views-count{
    font-size:14px;
    color:#94a3b8; 
    padding:4px 14px;
}

/* upload time css */
.views-row {
    display: flex;
    align-items: center;
    gap: 10px; /* views এবং time এর মধ্যে জায়গা */
    font-size: 14px;
    color: #020617;
    margin-top: 17px;
    margin-bottom: 10px;
}

/* upload time css */
.views-row span {
    display: inline-flex;
    align-items: center;
}

.video-meta {
    margin-top: 17px;
    margin-bottom: 10px;
}

/* Start feed grid */

/* Feed Grid */
.feed-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:0;
    margin-bottom: 0;
}

/* Responsive */

@media(max-width:992px){

    .feed-grid{
        grid-template-columns:repeat(2,1fr);
        gap: 17px;
        margin-top: 5px;
    }

}

@media (min-width:769px) and (max-width:1024px){

    .feed-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

}

/* Tablet */
@media (min-width:601px) and (max-width:1024px){

    .feed-grid{
        grid-template-columns:repeat(2,1fr);
        gap:17px;
        margin-top: 5px;
    }

}

/* Mobile */
@media (max-width:600px){

    .feed-grid{
        grid-template-columns:1fr;
        gap: 5px;
    }

}

/*========== new add =========*/

@media (max-width: 600px){

    .video-card{
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .feed-grid{
        gap: 0 !important;
        padding: 0 !important;
    }

}

@media (max-width: 600px){

    .feed-grid,
    .video-card,
    .video-wrapper{
        padding: 0 !important;
        margin: 0 !important;
        
    }
    
    /* new add */
    /*.feed-grid,
    .video-card,
    .watch-video-wrapper{
        padding: 0 !important;
        margin: 0 !important;
        
    }*/

}

@media (max-width: 600px){

    html, body{
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }

    /* KILL CENTERED LAYOUT */
    .container,
    .wrapper,
    .main,
    .content,
    .page,
    .feed-container{
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

}

@media (max-width: 600px){

    .video-card,
    .video-wrapper,
    .video-thumb{
        border-radius: 0 !important;
    }

}

.video-card{
    width: 100%;
    min-width: 0; /* VERY IMPORTANT for grid fix */
}

.feed-grid > *{
    width: 100%;
}

.feed-grid{
    width: 100%;
    margin: 0;
    padding: 0;
}

.video-card{
    width: 100%;
    margin: 0;
}

.feed-grid > *{
    min-width: 0;
}

/* End feed grid */

.creator-header,
.video-title,
.views-count,
.reaction-bar,
.video-card p{
    padding-left:14px;
    padding-right:14px;
}

.creator-header{
    padding:12px 14px 0 14px;
}

.creator-left{
    display:flex;
    align-items:center;
    gap:10px;
}

/* Avatar */
.creator-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
}

/* Creator Link */

.creator-link{
    color:#666;
    font-weight:700;
    text-decoration:none;
    font-size:15px;
}

.creator-badge{
    font-size:11px;
    color:#06b6d4;
    background: #444;
    border-radius: 10px;
}

.video-frame{
    width:100%;
    aspect-ratio:16 / 9;

    border:none;
    display:block;
}

.creator-name{
    color: #94a3b8;
    margin-bottom: 14px;
    font-size: 14px;
}

/*.creator-name{
    color:#94a3b8;
    font-size:13px;
}*/

.creator-name a{
    color: #06b6d4;
    font-weight: 600;
}

/* Reaction Bar */
.reaction-bar{
    display:flex;
    gap:10px;
    padding:6px 10px;
}

/* Reaction Button */
.reaction-btn{
    background:#1e293b;
    padding:8px 14px;
    border-radius:10px;
    color:#f8fafc;
    text-decoration:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    transition:0.25s ease;
    font-size:14px;
    line-height:1;

    vertical-align:middle;
}

.reaction-btn:hover{
    background:#334155;
}

.reaction-btn span{
    display:flex;
    align-items:center;
}

/* Creator Header */

.creator-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

/* Meta */

.creator-meta{
    display:flex;
    flex-direction:column;
}

/* BUTTON */

/*.btn{
    display:inline-block;
    background:#ff0000;
    color:#fff;
    padding:10px 20px;
    border-radius:6px;
}*/


.btn{
    background:#27272a;
    color:#ffffff;
    border:none;
    padding:10px 16px;
    border-radius:999px;
    font-size: 16px;
    font-weight:500;
    cursor:pointer;
    align-items:center;
    gap:10px;
}

.btn:hover{
    opacity: 0.9;
}

/*.btn:hover{
    transform:scale(1.05);
}*/

.video-cc-description {
    color:#e5e7eb;
}

/* FORM */

.auth-form{
    background:#fff;
    padding:20px;
    border-radius:10px;

    margin:20px auto;   /* center */
    max-width:500px;    /* width limit */

    box-sizing:border-box;
}

.form-r-title {
    display: flex;
    margin: 16px auto;
    justify-content: center;
    font-size: 32px;
}

input,
textarea,
select{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:6px;
}

button{
    background:#ff0000;
    color:#fff;
    padding:12px 20px;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* FORM end */



/* MOBILE */

@media(max-width:768px){

    .video-frame{
        height:220px;
    }

    .cc-nav{
        flex-direction:column;
    }

}

@media(max-width:768px){

    .video-frame{
        height:220px;
    }

    .video-card{
        padding:14px;
    }

    .video-title{
        font-size:17px;
    }

}

@media(max-width:768px){

    .creator-avatar{
        width:35px;
        height:35px;
    }

}

/* ================================
   Start CREATOR PROFILE PAGE CSS
================================= */

.creator-profile-box{
    background:#fff;
    padding:25px;
    border-radius:14px;
    margin:20px 0;
    box-shadow:0 5px 20px rgba(0,0,0,0.06);
    text-align:center;
    position:relative;
}

.creator-profile-avatar{
    width:110px;
    height:110px;
    border-radius:50%;
    border:4px solid #fff;
    object-fit:cover;
    margin-top:-60px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.creator-profile-name{
    font-size:26px;
    margin-top:10px;
    font-weight:bold;
}

.creator-username{
    color:#666;
    margin-top:5px;
}

.creator-channel-meta{
    color:#666;
    font-size:13px;
    margin-top:4px;
}

.creator-verified{
    box-shadow:0 0 10px rgba(124,58,237,0.4);
    animation:pulse 2s infinite;
    color:#06b6d4;
    background: #666;
    width: 128px;
    height: 26px;
    border-radius: 11px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 14px;
}

@keyframes pulse{
    0%{box-shadow:0 0 10px rgba(124,58,237,0.3);}
    50%{box-shadow:0 0 18px rgba(124,58,237,0.6);}
    100%{box-shadow:0 0 10px rgba(124,58,237,0.3);}
}

.creator-profile-bio{
    margin-top:15px;
    color:#444;
    font-size:14px;
    line-height:1.6;
}

/* =========================
   STATS
========================= */

.creator-stats{
    display:flex;
    justify-content:space-around;
    margin-top:20px;
    padding:15px 0;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

.creator-stat{
    text-align:center;
}

.creator-stat strong{
    display:block;
    font-size:18px;
    color:#111;
}

.creator-stat span{
    font-size:12px;
    color:#777;
}

/* =========================
   ACTION BUTTONS
========================= */

.creator-action-buttons{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:20px;
    flex-wrap:wrap;
}

.creator-action-buttons a{
    transition:0.2s;
}

.creator-follow-btn, 
.creator-support-btn {
    background:#27272a;
    color:#ffffff;
    border:none;
    padding:10px 16px;
    border-radius:999px;
    font-size: 16px;
    font-weight:500;
    cursor:pointer;
    align-items:center;
    gap:10px;
}

.creator-follow-btn:hover{
    opacity: 0.9;
}

.creator-support-btn:hover{
    opacity: 0.9;
}

/* =========================
   VIDEO GRID
========================= */

.creator-video-heading{
    margin-top:30px;
    font-size:20px;
    font-weight:bold;
}

.feed-grid > *{
    display:block;
}

.video-wrapper{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#000;
    display:block;
}

.creator-video-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px;
    margin-top:15px;
}

.creator-video-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    transition:0.2s;
}

.video-thumb{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
    border-radius: 12px;
}

.creator-video-title{
    padding:10px;
    font-size:14px;
    font-weight:500;
}

@media (max-width: 768px){

    .video-thumb{
        height: 180px !important;
        width: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .video-wrapper{
        aspect-ratio: 16/9;
        height: auto !important;
    }

}

@media (max-width: 600px){

    .video-thumb{
        height: 180px !important;
        width: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .video-wrapper{
        aspect-ratio: 16/9;
        height: auto !important;
    }

}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){
    
    .creator-video-grid{
        grid-template-columns:repeat(1, 1fr);
    }

    .creator-stats{
        flex-direction:column;
        gap:10px;
    }

    .creator-profile-avatar{
        width:90px;
        height:90px;
    }
    
    .creator-banner{
        height:140px;
    }
}

@media(max-width:768px){

    .creator-video-grid{
        grid-template-columns:1fr;
    }
}

.creator-banner{
    width:100%;
    height:180px;
    background:linear-gradient(135deg,#7c3aed,#ff0000);
    border-radius:14px;
    margin-bottom:-60px;
}

@media(max-width:768px){

    .creator-banner{
        height:140px;
    }

    .creator-profile-box{
        margin-top:-40px;
    }

}

/* ===============================
   End CREATOR PROFILE PAGE CSS
================================ */


/* ==================================
  Start notificatons logic badge css
====================================*/

.cc-notification-link{
    position:relative;
}

.cc-notification-badge{
    position:absolute;
    top:-6px;
    right:-8px;

    min-width:18px;
    height:18px;

    background:#ef4444;
    color:#ffffff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:11px;
    font-weight:bold;

    padding:2px 5px;

    box-shadow:0 0 10px rgba(239,68,68,0.5);
}

 /*================================
  End notificatons logic badge css
 =================================*/

   /* ============================ */
   Start notifications page css
   ==============================*/
   .cc-notification-page{
    max-width:800px;
    margin:40px auto;
}

.cc-page-title{
    margin-bottom:25px;
}

.cc-page-title h1{
    color:#111827;
    font-size:32px;
    margin-bottom:8px;
}

.cc-page-title p{
    color:#94a3b8;
}

.cc-notification-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.cc-notification-card{
    background:#111827;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:18px;
    transition:0.3s ease;
}

.cc-notification-card:hover{
    transform:translateY(-2px);
    border-color:rgba(59,130,246,0.4);
}

.cc-notification-card.unread{
    border-left:4px solid #3b82f6;
}

.cc-notification-text{
    color:#fff;
    font-size:15px;
    line-height:1.6;
}

.cc-notification-time{
    display:block;
    margin-top:10px;
    color:#94a3b8;
    font-size:13px;
}

.cc-empty-notification{
    text-align:center;
    padding:80px 20px;
    background:#111827;
    border-radius:16px;
}

.cc-empty-notification h3{
    color:#fff;
    margin-bottom:10px;
}

.cc-empty-notification p{
    color:#94a3b8;
}
   
   /*===========================
   End notifications pade css
   ===========================*/
   
   
   /*===============================
   Start notification bell icon css
   ===============================*/
   .cc-bell-wrapper{
    position:relative;
    margin-right:28px;
}

.cc-bell-btn{
    position:relative;
    cursor:pointer;
    font-size:22px;
    color:#fff;
    padding:8px;
}

.cc-bell-badge{
    position:absolute;
    top:0;
    right:0;

    min-width:18px;
    height:18px;

    background:#ef4444;
    color:#fff;

    border-radius:50%;

    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cc-bell-dropdown{
    position:absolute;
    right:0;
    top:45px;

    width:320px;

    background:#0f172a;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:14px;

    display:none;

    overflow:hidden;

    z-index:99999;

    box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.cc-bell-header{
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,0.08);

    font-weight:600;
    color:#fff;
}

/* new add from localhost */
.cc-notif-scroll-list {
    max-height: 300px;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

.cc-bell-item{
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,0.05);

    transition:0.2s ease;
    
    display: block;
}

.cc-bell-item:hover{
    background:#1e293b;
}

.cc-bell-item p{
    color:#fff;
    font-size:14px;
    margin-bottom:5px;
}

.cc-bell-item small{
    color:#94a3b8;
    font-size:12px;
}

.cc-bell-empty{
    padding:30px;
    text-align:center;
    color:#94a3b8;
}

.cc-view-all-btn{
    display:block;
    padding:14px;
    text-align:center;

    background:#111827;
    color:#3b82f6;

    text-decoration:none;
    font-weight:600;
}
   
   /*============================
   End notificaton bell icon css
   ============================*/
   
   /*=================================
   Start analytics dashboard page css
   ==================================*/
   .cc-dashboard{
    padding:30px;
}

.cc-title{
    color:#0f172a;
    font-size:28px;
    margin-bottom:8px;
}

.cc-subtitle{
    color:#94a3b8;
    margin-bottom:25px;
}

.cc-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:20px;
    margin-bottom:30px;
}

.cc-stat-box{
    background:#0f172a;
    border:1px solid rgba(255,255,255,0.08);
    padding:20px;
    border-radius:14px;
    text-align:center;
    transition:0.3s;
}

.cc-stat-box:hover{
    transform:translateY(-3px);
    border-color:#3b82f6;
}

.cc-stat-box h2{
    color:#3b82f6;
    font-size:26px;
}

.cc-stat-box p{
    color:#94a3b8;
}

.cc-dashboard-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.cc-btn{
    padding:10px 14px;
    background:#1f2937;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    transition:0.3s;
}

.cc-btn:hover{
    background:#334155;
}

.cc-btn.danger{
    background:#ef4444;
}
   
   /*=================================
   End analytics dashboard page css
   ==================================*/
   
   /*============================
   Start trending feed.php UI CSS
   =============================*/
.feed-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
    padding:20px;
}

/* VIDEO CARD */

/* THUMBNAIL */
/*.video-thumb{
    width:100%;
    object-fit:cover;
    display: block;
}*/

/* TITLE */
.video-card h3{
    color:#fff;
    font-size:16px;
    padding:10px 12px;
    line-height:1.4;
}

/* CREATOR */
.creator-info{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px 10px;
}

/* STATS */
.video-stats{
    padding:0 12px 10px;
    color:#94a3b8;
    font-size:12px;
}

/* ACTIONS */
.video-actions{
    display:flex;
    justify-content:space-between;
    padding:12px;
}

.btn-watch{
    background:#3b82f6;
    color:#fff;
    padding:6px 12px;
    border-radius:8px;
    text-decoration:none;
}

.btn-subscribe{
    background:#1f2937;
    color:#fff;
    padding:6px 12px;
    border-radius:8px;
    text-decoration:none;
}

/* 🔥 TRENDING BADGE */
.trending-badge{
    position:absolute;
    top:10px;
    left:10px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    padding:4px 8px;
    border-radius:6px;
    font-weight:bold;
}
   
   /*============================
   End trending feed.php UI CSS
   =============================*/

/* TITLE */

.watch-title{
    margin-top: -13px;
    font-size:24px;
    font-weight:700;
    color:#000;
}

/* TOPBAR */

.watch-topbar{
    display:flex;
    align-items:center;
    margin-top:18px;
    gap:23px;
    flex-wrap:wrap;
    position:relative;
    z-index:5;
    gap: 15px;
}

/* CHANNEL */

.watch-channel{
    display:flex;
    align-items:center;
    gap:12px;
}

.watch-channel-name{
    font-size:20px;
    font-weight:600;
    color:#020617;
}

.watch-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    
   /* flex-shrink: 0;*/
}

/* ACTIONS */

.watch-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:20px;
    flex-wrap: wrap;
}

.watch-subscribe-btn{
    background:#27272a;
    color:#ffffff;
    border:none;
    padding:10px 16px;
    border-radius:999px;
    font-size: 16px;
    font-weight:500;
    cursor:pointer;
    align-items:center;
    gap:10px;
}

.watch-subscribe-btn:hover{
    opacity: 0.9;
}

.watch-subscribe-btn.active{
    background: #2a2a2a;
    color: #fff;
}

.watch-subscriber-count{
    font-size:13px;
    color:#777;
    margin-top:2px;
}

/* =================================
  Start new css  WATCH PAGE PLAYER
================================== */

.watch-container{

    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

.watch-main{
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-width: 0;
    
    /* add new */
    max-width:none;
}

.video-player{
    width:100%;
}

.video-player iframe{
    width:100% !important;
    height:100% !important;
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 13px;
    overflow: hidden;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.watch-iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

.watch-container h2{

    font-size:24px;

    margin-top:13px;

    line-height:1.4;
}

.watch-description-box{
    margin-top: -10px;
    background:#e6e6e5; 
    padding:16px;
    border-radius:12px;
}

.watch-description-box:hover {
    background:#fef6fb;
}

.watch-stats-row{
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    color: #000;
    margin-bottom: 10px;
    flex-wrap: wrap;
    font-weight: 550;
}
    
/* =================================
  End new css  WATCH PAGE PLAYER
================================== */



/* =================================
  Start grid css  WATCH PAGE PLAYER
================================== */

.watch-page{
    background: #f8fafc;
    min-height: 100vh;
    padding: 20px 15px;
}


/*.watch-grid{
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 2fr) 235px;

    gap: 23px;
    align-items: start;
}*/

.watch-grid{
    max-width: 1400px;
    margin: 0 auto;

    display: grid;

    grid-template-columns: minmax(0,1fr) 320px;

    gap: 20px;
    align-items: start;
}

.watch-channel-meta{
    display: flex;
    flex-direction: column;
}

.watch-reaction-btn{
    border: none;
    background: #e6e6e5;
    color: #000;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: 0.2s ease;
}

.watch-reaction-btn:hover{
    background: #cdcdcd;
}

/* === Start WATCH PAGE MOBILE FULL WIDTH VIDEO and sticky === */

@media (max-width: 600px){

    .watch-page{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Video only breaks out of page padding */
    .video-player{
        width: calc(100vw - 0px) !important;

        /* remove page padding effect */
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    .video-wrapper{
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* new add */
    /*.watch-video-wrapper{
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }*/

    .watch-iframe{
        width: 100% !important;
        height: 56.25vw !important;
        display: block !important;
        border: 0 !important;
    }

}

@media (max-width: 600px){

  /* comment for fix thumbnail */
    .video-wrapper{
        aspect-ratio: 16 / 9;
        width: 100%;
    }
    
    /* new add */
    /*.watch-video-wrapper{
        aspect-ratio: 16 / 9;
        width: 100%;
    }*/

    .watch-iframe{
        width: 100%;
        height: 100%;
    }

}

/* scroll sticky mobile watch video */

@media (max-width: 768px){

    .video-player.is-sticky{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto !important;
        z-index: 9999;
    }

}


/* === End WATCH PAGE MOBILE FULL WIDTH VIDEO and sticky === */


  /*=========================
   Start comments system css
  ==========================*/
  
.comments-section form{
    display:flex;
    flex-direction:column;
    gap:8px;

    max-width:none;
    margin:0;
}
  
  .comments-section{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 11px;
}

.comments-section h3{
    color:#000;
    margin-bottom:15px;
    font-size: 18px;
    font-weight: 700;
}

.comments-section textarea{
    width: 100%;
    resize: vertical;
    background: #fff;
    color: #000;
    border: 1px solid #2d2d2d;
    border-radius: 10px;
    padding: 10px;
}

.comments-section button{
    align-self: flex-start;
    border: none;
    background: #ff0033;
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
}

.comment-item{
    display:flex;
    gap:8px;
    margin-top: 0;
    padding:14px;
    background: #fff;
    border-radius:12px;
}

.comment-item b{
    display: block;
    margin-bottom: 6px;
}

.comment-avatar{
    width:42px;
    height:42px;

    border-radius:50%;
    object-fit:cover;
}

.comment-content strong{
    color:#fff;
}

.comment-content p{
    color:#e2e8f0;
    margin:6px 0;
}

.comment-content small{
    color:#94a3b8;
    font-size:12px;
}

  /*=========================
   End comments system css
   ==========================*/
   
   /*=========================
   Start watch right sidebar 
  /*=========================*/
  
.watch-sidebar{
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 20px;
}

.sidebar-title{
    font-size: 16px;
    color: #aaa;
    margin-bottom: 5px;
}

.suggest-video-card{
    display:flex;
    gap:10px;
    align-items:stretch;
}

.suggest-video-card:hover{
    opacity: 0.9;
}

.video-wrapper,
.suggest-thumb{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#000;
    display:block;
}

.suggest-thumb{
    width:168px;
    flex: 0 0 168px;
    height:94px; 
    overflow:hidden;
    background:#000;
    position:relative;
    border-radius: 12px;
}

.suggest-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.suggest-info{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.suggest-info h4{
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.suggest-info span{
    font-size: 13px;
    color: #aaa;
}

@media (max-width:768px){

    .suggest-video-card{
        flex-direction:column;
        align-items:stretch;
    }

    .suggest-thumb{
        width:100%;
        position:relative;
        overflow:hidden;
        background:#000;
        aspect-ratio:16 / 9;
    }

    .suggest-thumb img{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }
}

@media (max-width:600px){

    .suggest-video-card{
        flex-direction:column;
        align-items:stretch;
    }

    .suggest-thumb{
        width:100%;
        position:relative;
        overflow:hidden;
        background:#000;
        aspect-ratio:16 / 9;
    }

    .suggest-thumb img{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }
}

@media (max-width: 1100px){

    .watch-grid{
        grid-template-columns: 1fr;
    }

    .watch-sidebar{
        position: static;
    }

}

@media (max-width: 768px){

    .watch-page{
        padding: 12px; 15px;
    }

    .watch-title{
        font-size: 17px;
        margin-top: 16px;
        font-weight:465;
    }

    .watch-topbar{
        flex-direction: column;
        align-items: flex-start;
    }

    .suggest-thumb{
        width: 140px;
    }

}

@media (max-width: 520px){

    .suggest-video-card{
        flex-direction: column;
    }

    .suggest-thumb{
        width: 100%;
    }

}

/* =========================
       SUGGEST INFO
========================= */

/* title */

.suggest-title{
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;

    color: #000;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

/* channel */

.suggest-channel{
    font-size: 13px;
    color: #aaa;
}

/* meta */

.suggest-meta{
    font-size: 12px;
    color: #888;
}

/* ======= new add ======== */
  /*== add  new */


/* new overrite css */


   /*=========================
     End watch right sidebar 
  /*=========================*/


  /*=========================
   Start description tex css
  ==========================*/

.watch-description{
    color: #000;
    line-height: 1.7;
    font-size: 15px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.watch-description.collapsed{
    max-height: 52px;
    overflow: hidden;
}

.watch-description.expanded{
    display: block;
}

.watch-desc-toggle{
    margin-top: 10px;

    background: transparent;
    border: none;

    color: #3ea6ff;

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

    cursor: pointer;

    padding: 0;
}
  
  /*=========================
   Start description tex css
  ==========================*/
  
  
  /* =========================
   Start MONETIZATION BADGE
   ========================= */

.creator-earning-badge{

    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 4px;

    background: rgba(34,197,94,0.12);

    color: #22c55e;

    border: 1px solid rgba(34,197,94,0.25);

    padding: 4px 10px;

    border-radius: 999px;

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

    width: fit-content;
}

  /* =========================
   End MONETIZATION BADGE
   ========================= */
   
  /* ===========================
   Start WATCH SUPPORT BUTTON
  ======================== === */

.watch-support-btn{

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    border-radius: 999px;

    background: linear-gradient(135deg, #ff4d6d, #ff0033);

    color: #fff;

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

    text-decoration: none;

    transition: 0.2s ease;

    box-shadow: 0 4px 14px rgba(255,0,51,0.25);
}

.watch-support-btn:hover{

    transform: translateY(-1px);

    opacity: 0.95;
}

@media(max-width:768px){
    
    .watch-support-btn {
        padding: 6px 14px;
    }
}

 /* ===========================
   End WATCH SUPPORT BUTTON
  ======================== === */

/* ==================================================
   Start Emmotional CTA SUPPORT EXPLANATION STRIP
================================================== */

.support-explain-strip{

    display: flex;
    align-items: center;
    gap: 0;
    background:#e6e6e5;
    /*background: rgba(255,255,255,0.04);*/

    border: 1px solid rgba(255,255,255,0.08);

    padding: 5px 10px;

    border-radius: 14px;

    margin-top: 0;
}

/* icon */

.support-strip-icon{

    font-size: 18px;

    flex-shrink: 0;
}

/* text */

.support-strip-text{
    color: #000;
    font-size: 14px;
    line-height: 1.6;
}
  
  /* subtle monetization glow */

.support-explain-strip{

    position: relative;

    overflow: hidden;

    box-shadow:
    0 0 0 rgba(255,255,255,0),
    0 0 18px rgba(255, 0, 85, 0.08);

    transition: 0.25s ease;
}

/* hover effect */

.support-explain-strip:hover{

    border-color: rgba(255, 0, 85, 0.22);
    background:#fef6fb;;

    box-shadow:
    0 0 24px rgba(255, 0, 85, 0.14);
}

/* text glow focus */

.support-strip-text{

    color: 000;

    text-shadow:
    0 0 10px rgba(255,255,255,0.04);
}

.support-strip-icon {
    filter: drop-shadow(0 0 8px rgba(255, 0, 85, 0.35));
}

  /* ============================================
   End Emmotional CTA SUPPORT EXPLANATION STRIP
  ============================================= */
  
  /* =========================
       Start SOCIAL PROOF
   ========================= */

.support-social-proof{

    margin-top: 0;

    padding: 5px 10px;

    border-radius: 12px;

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.06);

    color: #000;

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

    letter-spacing: 0.2px;

    box-shadow:
    0 0 16px rgba(250, 204, 21, 0.05);
    
}

    /* =========================
       Start SOCIAL PROOF
   ========================= */
   
  /* ===========================
   Start REAL SUPPORT ACTIVITY
  =========================== */

.real-support-activity{
    margin-top: 0;
    padding: 5px 10px;
    border-radius: 14px;
    background:
    linear-gradient(
    135deg,
    rgba(255,0,85,0.08),
    rgba(255,140,0,0.06)
    );

    border: 1px solid rgba(255,255,255,0.08);
    color: red;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    box-shadow:
    0 0 20px rgba(255,0,85,0.08);
}

  /* ===========================
   Start REAL SUPPORT ACTIVITY
  =========================== */
  
  /*===========================
   START TOTAL EARNED BOX CSS
  =========================== */

.total-earned-box{

    margin-top: 0;

    padding: 5px 10px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        rgba(34,197,94,0.08),
        rgba(16,185,129,0.06)
    );

    border: 1px solid rgba(34,197,94,0.18);

    color: #000;

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

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-shadow: 0 0 18px rgba(34,197,94,0.08);
}

.earned-amount{
    color: #000;
    font-size: 16px;
    font-weight: 700;
}
  /*==========================
   END TOTAL EARNED BOX CSS
  =========================== */
  
  
  /* =========================
   START LIVE SUPPORT FEED
  ========================== */

.live-support-feed{

    margin-top: 0;

    padding: 5px 10px;

    border-radius: 14px;

    background: rgba(255,255,255,0.03);
    
    border: 1px solid rgba(255,255,255,0.08);
}

.live-title{

    font-size: 13px;
    font-weight: 700;

    color: #ef4444;

    margin-bottom: 8px;
}

/* each item */

.live-item{

    display: flex;
    gap: 6px;

    flex-wrap: wrap;

    font-size: 13px;

    padding: 6px 0;

    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.live-user{
    color: #ffffff;
    font-weight: 600;
}

.live-action{
    color: #9ca3af;
}

.live-amount{
    color: #22c55e;
    font-weight: 700;
}

.live-time{
    color: #6b7280;
    font-size: 12px;
}

.live-empty{
    color: #6b7280;
    font-size: 13px;
}

 /* =========================
   END STARTLIVE SUPPORT FEED
 ========================== */
 
 
 /* =========================
    START TOP SUPPORTERS
 ========================= */

.top-supporters-box{
    margin-top: 0;
    padding: 5px 10px 5px 0;
    border-radius: 16px;

    background:
    linear-gradient(
    135deg,
    rgba(255,215,0,0.06),
    rgba(255,255,255,0.03)
    );
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
    0 0 20px rgba(255,215,0,0.05);
}

.top-supporters-title{
    font-size: 14px;
    font-weight: 700;
    color: #facc15;
    margin-bottom: 8px;
}

/* item */

.top-supporter-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom:
    1px solid rgba(255,255,255,0.05);
}

.top-supporter-name{
    color: #000;
    font-size: 13px;
    font-weight: 600;
}

.top-supporter-amount{
    color: #000;
    font-size: 13px;
    font-weight: 700;
}

.top-supporter-empty{
    color: #6b7280;
    font-size: 13px;
}

 /* =========================
    END TOP SUPPORTERS
 ========================= */
 
 
  /* ==========================
   START CREATOR MONETIZATION
  =========================== */

.creator-monetization-box{

    display: grid;

    grid-template-columns:
    repeat(auto-fit, minmax(220px,1fr));

    gap: 16px;

    margin-top: 22px;
}

.creator-money-card{

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px;

    border-radius: 18px;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
    );

    border: 1px solid rgba(255,255,255,0.06);

    box-shadow:
    0 0 24px rgba(0,0,0,0.18);

    transition: 0.25s ease;
}

.creator-money-card:hover{

    transform: translateY(-2px);

    border-color:
    rgba(34,197,94,0.25);
}

.creator-money-icon{

    font-size: 28px;
}

.creator-money-card strong{

    display: block;

    font-size: 20px;
    font-weight: 700;

    color: #ffffff;
}

.creator-money-card p{

    margin-top: 4px;

    color: #9ca3af;

    font-size: 13px;
}

  /* ==========================
   START CREATOR MONETIZATION
  =========================== */
  
  
  /* =========================
   START CREATOR BADGE SYSTEM
  ========================= */

.creator-badge-box{

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 10px;
}

.creator-rank-badge{

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

    background:
    linear-gradient(
    135deg,
    rgba(124,58,237,0.18),
    rgba(255,255,255,0.06)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    color: #000;

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

    box-shadow:
    0 0 18px rgba(124,58,237,0.08);
}
  /* =========================
   END CREATOR BADGE SYSTEM
  ========================= */
  
  /* ==================================
   START BADGE for feed, watch, profile
  =================================== */
  
.feed-rank-badge,
.watch-rank-badge{

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 10px;

    border-radius: 999px;

    margin-top: 6px;

    /*background:
    rgba(124,58,237,0.12);*/

    border:
    1px solid rgba(255,255,255,0.06);

    color: #666;

    font-size: 11px;
    font-weight: 600;
}

.watch-channel-identity{

    display: flex;
    flex-direction: column;
}

 /* ==================================
   End BADGE for feed, watch, profile
  =================================== */
  
  /* ========================
   START BADGE for feed css
  ======================== */

.creator-meta-row{

    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 4px;

    flex-wrap: wrap;
}

.feed-rank-badge{

    margin-top: 0;
}

  /* ========================
   End BADGE for feed css
  ======================== */
.creator-meta-column{

    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 4px;
}

.feed-rank-badge{

    width: fit-content;

    margin-top: 0;
}


 /*=========================================
  Start CREATE REPUTATION FUNCTION for feed 
  ==========================================*/
.creator-reputation-box{

    margin-top: 12px;

    padding: 10px 14px;

    border-radius: 12px;

    background:
    rgba(124,58,237,0.12);

    border:
    1px solid rgba(255,255,255,0.06);

    color: #666;

    font-size: 14px;

    font-weight: 600;

    width: fit-content;
}
  
  /*=========================================
  Start CREATE REPUTATION FUNCTION for feed 
  ==========================================*/
  
  /*=====================================
  Start top supported creator system css 
  ======================================*/
  
.btn-boost {
    display: flex;
    justify-content: center;
    gap: 4px;
}
  
  
.top-supported-section{

    margin-bottom: 40px;
}

.top-supported-heading{

    font-size: 22px;
    font-weight: 700;

    margin-bottom: 18px;

    color: #000;
}

.top-supported-grid{

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap: 16px;
}

.top-supported-card{

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px;

    border-radius: 18px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.06);
}

.top-supported-avatar{

    width: 58px;
    height: 58px;

    border-radius: 50%;
}

.top-supported-meta{

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.top-supported-badge{

    width: fit-content;

    padding: 4px 10px;

    border-radius: 999px;

    background:
    rgba(124,58,237,0.12);

    font-size: 11px;

    font-weight: 600;
}

.top-supported-btn{

    padding: 10px 14px;

    border-radius: 12px;

    background: #7c3aed;

    color: 000;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;
}

@media(max-width:768px){
    .top-supported-heading {
        font-size: 17px;
        font-weight: 500;
        margin-bottom: 5px;
        color: #000;
    }
}

 /*=====================================
  End top supported creator system css 
  ======================================*/
  
  
  
  /*============================================
   start send gift real time flauting animation
  ============================================*/
.floating-gift {
    position: fixed;
    bottom: 100px;
    right: 50%;
    font-size: 30px;
    animation: floatUp 2s ease-out forwards;
    z-index: 9999;
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px);
        opacity: 0;
    }
}

/*============================================
   End send gift real time flauting animation
  ============================================*/
  
  /*=======================================================
   Start live support feed automaic showing when send gift
  ========================================================*/
  
  .live-support-feed{
    background:#111;
    padding:15px;
    border-radius:10px;
    color:#fff;
}

.live-feed-item{
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}

  /*=======================================================
   End live support feed automaic showing when send gift
  ========================================================*/
  
  /*=====================
    Strat top gifters box 
  ======================*/
  
.top-gifters-box{
    background:#111;
    color:#fff;
    padding:15px;
    border-radius:10px;
}

.top-gifter-item{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}  
  /*=====================
    End top gifters box 
  ======================*/
  
   /*============================
     Start user glow message css
   =============================*/
.earn-banner{
    margin-top: -10px;
    margin-bottom:0;
    padding:5px 10px;
    border-radius:10px;
    

    background:linear-gradient(
        90deg,
        #f0fff4,
        #f8fffa
    );

    border:1px solid #d7f5df;

    color:#1f6f43;
    font-size:14px;
    font-weight:500;

    box-shadow:
        0 0 10px rgba(40,167,69,.08);

    overflow:hidden;

    animation: bannerFade 4s ease-in-out infinite;
}

.earn-banner span{
    display:block;
    text-align:center;
    letter-spacing:.2px;
}

@keyframes bannerFade{
    0%{
        opacity:.75;
        box-shadow:0 0 5px rgba(40,167,69,.05);
    }

    50%{
        opacity:1;
        box-shadow:0 0 14px rgba(40,167,69,.15);
    }

    100%{
        opacity:.75;
        box-shadow:0 0 5px rgba(40,167,69,.05);
    }
}

  /* responsive */
  
@media(max-width:992px) {
    .earn-banner {
        margin-top: 5px;
    }
}

    
   /*============================
     End user glow message css
   =============================*/
   
   /*===============================
       Start legal privacy page css
   ================================*/

.legal-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-family: 'Arial', sans-serif;
    line-height: 1.7;
}

.legal-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 25px;
}

.legal-top h1 {
    font-size: 28px;
    color: #222;
    margin-bottom: 8px;
}

.lang-switch {
    margin-top: 5px;
    font-size: 14px;
}

.lang-switch a {
    text-decoration: none;
    color: #555;
    margin-right: 10px;
    font-weight: 500;
    transition: color 0.3s;
}

.lang-switch a:hover {
    color: #ff0033;
}

.lang-switch a.active {
    font-weight: 700;
    color: #ff0033;
}

.legal-content p {
    margin-bottom: 15px;
    color: #333;
    font-size: 16px;
}

.legal-content h2,
.legal-content h3,
.legal-content h4 {
    margin: 20px 0 10px;
    color: #222;
}

.legal-content ul,
.legal-content ol {
    margin: 10px 0 15px 20px;
}

.footer-links {
    text-align: center;
    margin-top: 50px;
}

.footer-links a {
    margin: 0 15px;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #ff0033;
}

/* Responsive */
@media screen and (max-width: 768px){
    .legal-container {
        margin: 30px 15px;
        padding: 15px 20px;
    }

    .legal-top h1 {
        font-size: 24px;
    }

    .legal-content p {
        font-size: 15px;
    }
}

  /*============================
  End legal dynamic page css
  ============================*/ 
  
  /* all thumbnail ratio black bar problem solved */

.video-wrapper,
.creator-video-wrapper,
.suggest-thumb{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#000;
}

@media (max-width:600px){

    .video-wrapper,
    .creator-video-wrapper{
        border-radius:0 !important;
    }

    .video-thumb,
    .suggest-thumb img{
        width:100% !important;
        height:100%; 
        object-fit:cover !important;
        display:block;
    }

}


  /* new add */
   /* Start mobile responsive header menu fix 
  ============================================*/
@media (max-width: 768px) {
    /* মোবাইল হেডারে Guest ইউজারের Login বাটন হাইড থাকবে (যেহেতু এটি বটম মেনুতে আছে) */
    .cc-user-wrapper .cc-header-login {
        display: none !important;
    }
}

/* ডেস্কটপে মোবাইল সার্চ আইকন এবং ব্যাক অ্যারো লুকিয়ে থাকবে */
.cc-mobile-search-icon {
    display: none;
    font-size: 18px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
}

.search-back-arrow {
    display: none;
    cursor: pointer;
    font-size: 20px;
    margin-right: 0;
    color: #475569;
}

  /*========align center back arrow=======*/
  @media (max-width: 768px) {
    /* মোবাইলে সার্চ আইকন দৃশ্যমান হবে */
    .cc-mobile-search-icon {
        display: inline-block;
    }

    /* মোবাইলে ডিফল্টভাবে মেইন সার্চ বক্স হাইড থাকবে */
    .cc-search-box, .cc-admin-search {
        display: none; 
    }

    /* যখন সার্চ আইকনে ক্লিক করা হবে, ফুল স্ক্রিন ওভারলে হয়ে ওপেন হবে */
    .cc-search-box.active, .cc-admin-search.active {
        display: flex !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        align-items: center;
        padding: 0 10px;
        z-index: 1000;
        box-sizing: border-box;
    }

    /* সার্চ উইপারকে পারফেক্ট ফ্লেক্স ও সেন্টার করা */
    .cc-search-box.active .search-wrapper,
    .cc-admin-search.active .search-wrapper {
        width: 100%;
        display: flex;
        align-items: center; /* এটি ব্যাক অ্যারো এবং ইনপুটকে একদম লম্বালম্বি মাঝখানে রাখবে */
        justify-content: space-between;
        gap: 0px; /* অতিরিক্ত গ্যাপ বা ফাঁকা রাখা বাদ দেওয়া হলো যাতে একদম সাথে থাকে */
    }

    /* ব্যাক অ্যারো আইকনটি ইনপুটের বাইরে বামপাশে একদম সেন্টার থাকবে */
    .cc-search-box.active .search-back-arrow, 
    .cc-admin-search.active .search-back-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #334155;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0 8px 0 0; /* ডানে সামান্য স্পেস দিয়ে ইনপুট থেকে দূরে রাখা হলো */
        line-height: 1;
        align-self: center; /* ফ্লেক্স কন্টেইনারে নিজে একদম মাঝ বরাবর থাকবে */
    }

    /* ইনপুট ফিল্ড */
    .cc-search-box.active input,
    .cc-admin-search.active input {
        /*width: 100%;*/
        flex-grow: 1;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 15px;
        outline: none;
        margin: 0; /* কোনো অতিরিক্ত মার্জিন যেন পজিশন নষ্ট না করে */
    }

    /* ডানপাশের সার্চ আইকন */
    .cc-search-box.active .search-icon,
    .cc-admin-search.active .search-icon {
        cursor: pointer;
        padding: 0 0 0 8px;
        color: #64748b;
        align-self: center;
    }
}
/* End mobile responsive header menu fix */