/* =========================
   General Page Styles
========================= */
body {
    background: #111;
    color: #f1c40f;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0px;
}




h2, h4 {
    margin-bottom: 20px;
}


/* =========================
   Layout (Mobile First)
========================= */
.layout {
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 20px;
    width: 100%;            /* full width of screen */
    box-sizing: border-box;  /* includes padding if any */
   
}

/* Ensure children stretch full width */
.layout > * {
    width: 100%;
}



/* =========================
   Video Playerp
========================= */
/* Desktop + mobile safe */
#video {
    width: 90%;           /* take full width of container */
    max-width: 90%;      /* desktop: maximum width you want */
    height: 500px;      /* maintain aspect ratio */
    max-height: 600px;     /* optional height limit */
    min-width: 300px;      /* prevents collapsing too small */
    object-fit: contain;   /* ensures video fits without stretching */
    display: block;
    box-sizing: border-box;
    margin-bottom: 50px;
     margin-right: 50px;   /* adjust as needed */
}


input {
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: #ff0000;
    border-image: initial;
    outline: none; /* remove default focus outline */
}

/* Keep border color same on focus and active */
input:focus,
input:active {
    border-color: #ff0000;
    border-style: inset;
}




/* =========================
   Channel List Container
========================= */
.channel-list-container {
    order: 1;                 /* After video on mobile */
    display: flex;
    flex-direction: column;
}




/* =========================
   Channel List
========================= */
.channel-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 400px;
    overflow-y: auto;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 10px 0;
    font: #ff0000;
}





.channel {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.channel:hover {
    background: #ff0000;
    
}



.channel span {
    font-size: 18px;
}


/* Active channel highlight */
.channel.active {
    background: #ff0000;
    border-left: 4px solid #f39c12;
    color: #ffffff;
}


/* =========================
   Logo
========================= */
.logo-container {
    text-align: center;
    margin: 20px 0;
}

.logo-container img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;   /* Mobile size */
    height: auto;
}

.logo-text {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 16px;
    color: #aaa;
}


/* =========================
   Desktop Layout (900px+)
========================= */
@media (min-width: 900px) {

    .layout {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: flex-start;
        gap: 20px;
    }

    .channel-list-container {
        width: 320px;
        max-height: 600px;
         
    }


}