/* 

Add here your custom css styles Example: p { text-align: center; color: red; } 

*/

/* --- Home page YouTube-style tweaks (YouPlay theme) --- */
/* Keep the top category swiper visible and separated from rows below (no overlap) */
.pt_sec_nav_cats {
    position: relative; /* was sticky; static flow avoids covering content */
    top: 0;
    z-index: 1;
    background: #f0f2f5; /* same as body background */
    padding: 8px 0;
    margin-bottom: 128px; /* larger gap before Trending / Shorts / etc. */
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Ensure the main home rows (Trending / Shorts / Top / Live / etc.) are fully visible under the nav */
.video-player-page.pt_home_top_m {
    padding-top: 40px; /* extra space below the top category swiper bar */
}

/* Constrain content width similar to YouTube and center it */
.container-home {
    max-width: 1280px;
    margin: 0 auto;
}

/* Softer section cards like YouTube's white panels on grey background */
.video-player-page.pt_home_top_m .content.pt_shadow.yp_trans {
    border-radius: 12px;
    padding: 16px 18px 12px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Slightly tighter video card titles and meta for a cleaner feed look */
.home-page-categories .videos .video-list .video-list-title h4,
.video-latest-list .video-title h4 {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.home-page-categories .videos .video-list .video-list-by {
    font-size: 11px;
    color: #606060;
}

/* Make sure long titles do NOT push poster name + views out of view */
.video-latest-list {
    height: auto !important;      /* override fixed 270px height */
    overflow: visible !important; /* allow meta text to show fully */
}
.pt_vid_fixed_height {
    height: auto !important;      /* remove any fixed height wrapper */
    overflow: visible !important;
}

/* Let titles wrap to any length and keep poster name + views directly underneath */
.home-page-categories .videos .video-list .video-list-title h4,
.video-latest-list .video-title h4 {
    display: block;
    max-height: none;             /* no clipping */
    overflow: visible;            /* show full text */
    white-space: normal;          /* allow wrapping */
}

/* YouTube-like home grid spacing */
.video-player-page.pt_home_top_m .home-page-categories .videos .row {
    margin-left: -8px;
    margin-right: -8px;
}
.video-player-page.pt_home_top_m .home-page-categories .videos [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 24px;
}

/* Make section titles look closer to YouTube */
.home-page-categories .title h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
}
.home-page-categories .title h4 > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f1f1;
}

/* Green primary buttons instead of red */
.btn-main {
    background-color: #00c853; /* green */
}
.btn-main:hover,
.btn-main:focus {
    background-color: #00b248;
}
.btn-subscribe {
    background-color: #00c853;
}
.btn-subscribed {
    background-color: #606060;
}

/* Clean header bar like YouTube */
.navbar-default,
header .navbar {
    background-color: #ffffff;
    border: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Ensure main container background follows page background */
#main-container {
    background: transparent;
}