/* 

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

*/

.watch-chat {
      position: relative;
      width: 100%;
      height: 820px; /* Set your desired height here */
}
.watch-chat iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }


.watch-chat-mobile {
      position: relative;
      width: 100%;
	  height : 50vh;
}
.watch-chat-mobile iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

/*buttons under live*/
		.btn-mob-live-container {
            display: flex;
            overflow-x: scroll;
            gap: 1px;
            padding: 0;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            scrollbar-width: none; /* For Firefox */
            -ms-overflow-style: none;  /* For Internet Explorer and Edge */
        }
        .btn-mob-live-container::-webkit-scrollbar {
            display: none; /* For Chrome, Safari, and Opera */
        }
        .btn-mob-live {
            flex: none;
            padding: 5px 20px;
            border: none;
            background-color: #0389c2; 
            color: white;
            font-size: 17px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-mob-live:hover {
            background-color: #0277A8; 
        }
        .btn-mob-live:active {
            background-color: #026693; 
        }

        .btn-mob-sub {
            flex: none;
            padding: 5px 20px;
            border: none;
            background-color: #04abf2; 
            color: white;
            font-size: 17px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-mob-unsub {
            flex: none;
            padding: 5px 20px;
            border: none;
            background-color: #0389c2; 
            color: white;
            font-size: 17px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .counter-live {
            flex: none;
            padding: 5px 20px;
            border: none;
            background-color: #0389c2;
            color: white;
            font-size: 17px;
            cursor: default; /* Non-clickable cursor */
            transition: background-color 0.3s;
        }
.watch-video-description { max-height: 60px; overflow: hidden; position: relative; transition: max-height 1s ease;}

.loader-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* To stack text above loader */
}
.loader-overlay.active {
    display: flex;
}

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-top: 20px; /* Add space between text and loader */
}
.loader-text {
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}