/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Version: 4.11.7
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 9.6
Tested up to: 6.8
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Astra WordPress Theme, Copyright 2020 WPAstra.
Astra is distributed under the terms of the GNU GPL.

Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Astra icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Astra WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/.

Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */


@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}



#publisherFullscreenWrapper {
    position: fixed !important;

    width: 100% !important;
    height: 100% !important;
    top:0 !important;
	left:0 !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    background: #000 !important;
}






#publisherSubscriberGrid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
	 z-index: 9990 !important;
    /* Add any grid/flex styles here as needed */
}







#profileOverlay {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 21474836 !important;
}


/* Hide UM edit tools in overlays */
#profileOverlay .um-profile.um-editing .um-profile-edit,
#profileOverlay .um-profile.um-editing .um-profile-edit-btn,
#profileOverlay .um-profile.um-editing .um-profile-nav,
#profileOverlay .um-profile.um-editing .um-btn.um-btn-primary.um-btn-edit {
    display: none !important;
}




.profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 10px 0 0 0;
}



.username {
    color: #fff;
    margin: 10px 0 0 0;
    text-align: center;
}


/* ================= Video Streams ================= */
.video-stream video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}



/* ================= Carousel ================= */
.carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    width: 100vw;
    min-height: 350px;
    background: transparent;
    border-radius: 12px;
    padding: 20px 0;
    position: relative;
	
}










#videoCarousel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
 gap: 20px;
    max-width: 100vw;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 10px;
	
}




#videoCarousel > div,
#videoCarousel video {
    max-width: 90vw;
    box-sizing: border-box;
}

#videoCarousel > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-arrow {
    background: #444;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-arrow-prev {
    left: 10px;
}

.carousel-arrow-next {
    right: 10px;
}


/* ================= Go Live Button ================= */
#goLiveBtn.go-live-btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    z-index: 10000;
    background: #000 !important;      /* Black background */
    color: #FFD700 !important;        /* Yellow text */
    border: none;
    padding: 15px 25px;
    border-radius: 25px;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    width: auto;
    height: auto;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
}


body.live-mode #goLiveBtn {
    display: none;
}


/* ================= Streamer UI Elements ================= */
.streamer-video.current-user {
    position: relative;
}




.streamer-video {
	position: relative; /* add this */
    width: 100px;
    height: 110px;
    flex: 0 0 auto; /* Don't shrink or grow */
    margin: 5px; /* Spacing between boxes */
    box-sizing: border-box;
}








.streamer-video .profile-pic{
position: absolute; 
	top: 0;
	left: 0; 
	width: 100%; 
	height: 100%; 
	object-fit: cover;
}

.streamer-video .username{
position: absolute; 
	bottom: 5px;
	left: 50%; 
	transform: translateX(-50%);
	color: black; 
	background: transparent;
	padding: 5px 10px; 
	border-radius: 5px;
}




.streamer-video .stream-description {
    position: absolute;
    bottom: 0; /* Place it right below the username */
    left: 50%;
    transform: translateX(-50%);
    color: white; /* Choose a color for the description */
    background: rgba(0, 0, 0, 0.5); /* Optional: background with some opacity */
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 14px; /* Adjust font size as needed */
    z-index: 0; /* Make sure description is below the username */
}







.close-stream {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #000;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-stream:hover {
    color: #ff0000;
}


/* Username Overlay Styling */
#publisherUsernameBox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10001;
  background-color: transparent;
  color: yellow;
  padding: 18px 42px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.5rem;
  border: 2px solid yellow;
 
}

#publisherUsernameText {
  color: inherit;
  font-weight: bold;
}

/* Mobile: half size */
@media (max-width: 600px) {
  #publisherUsernameBox {
    padding: 9px 21px;   /* half the padding */
    font-size: 0.75rem;  /* half the font size */
    border-width: 1px;   /* thinner border */
  }
}



#subscriberUsernameBox {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  background-color: transparent; /* darker for contrast */
  color: yellow;                         /* yellow text */
  padding: 5px 10px;                   
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.5rem;                      /* bigger font */
  border: 2px solid yellow;               /* yellow border */
     display: none;                     /* hidden by default */
}

#subscriberUsernameText {
  color: inherit;        /* inherits yellow */
  font-weight: bold;     /* emphasize username */
}

#subUsernameBox {
    position: absolute;
    bottom: 20px;           /* 10px from the bottom */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 1.4em;
    pointer-events: none;
    z-index: 10000;
    top: auto;              /* Ensure top is not set */
}


/* ================= Publisher Stream ================= */
#publisherStreamContainer {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: none;
}

#remoteVideo {
    position: relative; /* or absolute */
  
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    background: #000;
    z-index: 10000;
    border: 5px solid red !important;
}










/* ================= Chat Box ================= */
#publisherChatBox {
    position: absolute;
    bottom: 85px;
    left: 30px; /* Changed from right to left */
    width: 420px;
    max-height: 300px;
    background: transparent;
    color: #eff705;
    border-radius: 10px;
    padding: 10px;
    z-index: 10001;
    overflow-y: auto;
    display: none; /* Shown by JS */
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border-top: 3px solid #ff5a5f; /* Adds a border line above */
}


#publisherChatBox .chat-input{
border-top: 2px solid #edde07;
border-left: none;
border-right: none;
border-bottom: none;
background: transparent;
color: #eff705;
padding: 8px;
width: 100%;
box-sizing: border-box;

}




/* ================= Chat Message Styling ================= */
.chat-header {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 1px solid #666;
    padding-bottom: 4px;
    color: #eff705;
}

.chat-message {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.chat-profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
}

.chat-username {
    font-weight: bold;
    margin-right: 6px;
    color: #FFFFFF;;
}

.chat-text {
    color:#FFFFFF; 
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-send-btn:hover {
    background: #ffe066;
}


.chat-bubble-edit {
    position: fixed !important;
    background-color: #ADD8E6 !important;
    border-radius: 25px !important; /* More rounded */
    padding: 12px 20px !important;
    max-width: 250px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999 !important;
    font-size: 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important; /* No border */
    color: white !important;
    /* Optional: remove outline if any */
    outline: none !important;
}

/* Bubble tail (bottom center) */
.chat-bubble-edit::after {
    content: "" !important;
    position: absolute !important;
    bottom: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-top: 14px solid #ADD8E6 !important; /* Light blue tail */
}

/* Input inside the bubble */
.chat-bubble-edit input {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 14px;
    color: #333;
}










/* ================= Controls: Close / Minimize / Restore ================= */
#publisherCloseBtn,
#publisherMinimizeBtn,
#publisherRestoreBtn {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 2rem;
    cursor: pointer;
}


#publisherCloseBtn {
   Position: absolute; 
Top: 15px; 
Right: 15px; 
Background-color: transparent; 
Border: none; 
Color: white; 
	Font-size: 1.5rem;
	Cursor: pointer; 
	Padding: 8px 12px; 
	Margin-left: 8px;
	Z-index: 10001; 
	User-select: none;
	Transition: color 0.3s ease
Hover color: #ddd
}



#publisherMinimizeBtn {
	Position: fixed; 
Top: 15px; 
Right: 55px;
Background-color: transparent; 
Border: none; 
Color: white; 
Font-size: 1.5rem; 
Cursor: pointer; 
Padding: 8px 12px; 
Margin-left: 8px; 
Z-index: 10001; 
User-select: none; 
Transition: color 0.3s ease
Hover color: #ddd
   
}

#publisherRestoreBtn {
    position: absolute; /* Absolute positioning to move with the wrapper */
    bottom: 10px;       /* Adjust position to fit the minimized wrapper */
    right: 10px;        /* Align it with the bottom-right corner of the wrapper */
    z-index: 10004;     /* Ensure it appears on top of the wrapper */
    display: none;      /* Hidden by default */
}

#publisherRestoreBtn.show {
    display: inline-block !important; /* Show when it's added */
}


#subscriberCloseBtn{
Position: absolute; 
Top: 15px; 
Right: 15px; 
Background-color: transparent; 
Border: none; 
Color: white; 
	Font-size: 1.5rem;
	Cursor: pointer; 
	Padding: 8px 12px; 
	Margin-left: 8px;
	Z-index: 10001; 
	User-select: none;
	Transition: color 0.3s ease
Hover color: #ddd
}


#subscriberMinimizeBtn{
Position: fixed; 
Top: 15px; 
Right: 55px;
Background-color: transparent; 
Border: none; 
Color: white; 
Font-size: 1.5rem; 
Cursor: pointer; 
Padding: 8px 12px; 
Margin-left: 8px; 
Z-index: 10001; 
User-select: none; 
Transition: color 0.3s ease
Hover color: #ddd
}

#subscriberRestoreBtn {
    position: absolute; /* Absolute positioning to move with the wrapper */
    bottom: 10px;       /* Adjust position to fit the minimized wrapper */
    right: 10px;        /* Align it with the bottom-right corner of the wrapper */
    z-index: 10004; 
	border: none !important;
    display: none;      /* Hidden by default */
}

#subscriberRestoreBtn.show {
    display: inline-block !important; /* Show when it's added */
}



/* ================= Visibility Utility Classes ================= */
#publisherFullscreenWrapper,
#publisherVideo,
#remoteVideo,
#publisherChatBox,
#publisherCloseBtn,
#publisherMinimizeBtn,
#publisherRestoreBtn {
    display: none;
}





#streamEndedMsg {
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(40, 40, 40, 0.95);
    color: #fff;
    padding: 24px 40px;
    border-radius: 10px;
    font-size: 1.3em;
    z-index: 9999;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    text-align: center;
}


#gridView {
    display: none; /* JS will toggle this to 'block' */
    width: 100%;
    position: relative;
    padding: 20px 0;
}

.grid-container {
    display: grid; /* Switch to grid layout */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid, auto fills based on screen size */
    gap: 20px; /* Space between items */
    max-width: 1200px; /* Optional: limits grid width on large screens */
    margin: 0 auto; /* Center the grid container */
    width: 100%;
	
    box-sizing: border-box;
    justify-items: center; /* Centers grid items horizontally */
}

.grid-container .streamer-video {
    background: transparent;
    padding: 0;
    border-radius: 10px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    /* Removed width rule, as grid will handle item sizes */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        column-gap: 4px;    /* Reduce space between columns */
        row-gap: 8px;       /* Adjust as needed */
        padding-left: 0;
        padding-right: 0;
    }
    .grid-container .streamer-video {
        min-height: 220px;      /* Taller */
        width: 95%;            /* Take full grid cell width */
        aspect-ratio: 1 / 1;    /* Makes them more square/wider */
        margin: 0;              /* Remove extra margins */
    }
}













.view-switch-btn {
    padding: 10px 15px;
    margin-right: 10px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: white;
    border-radius: 5px;
}

.view-switch-btn:hover {
    background: #666;
}

#viewSwitcher {
  position: absolute;
  top: 16px;           /* Distance from top of carousel */
  left: 50%;           /* Start at horizontal center */
  transform: translateX(-50%); /* Shift left by 50% of own width for perfect centering */
  z-index: 1000;
}

#toggleViewBtn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 12px 18px;
 position:relative;
  font-size: 1.5em;
 
  transition: background 0.2s, color 0.2s;
}

#toggleViewBtn:hover {
  background: none;
  color: #fff;
  border-color: #fff;
}

#toggleViewBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%; /* Position above the button */
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.75em; /* Half size (adjust as needed) */
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-bottom: 6px;
}





#joinGuestBtn {
    position: absolute;
    top: 130px;           /* Slightly higher from the bottom */
    right: 50px;            /* Slightly more from the right */
    width: 40px;            /* Increased size */
    height: 40px;           /* Increased size */
    padding: 0;
    background: none;       /* No background */
    color: #333;
    border: none;
    border-radius: 50%;     /* Keep circular shape */
    font-size: 32px;        /* Slightly larger for icon/smiley */
    font-weight: bold;
    z-index: 10001;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;       /* Remove shadow for cleaner transparent look */
    transition: transform 0.2s ease, color 0.2s ease;
}




#joinGuestBtn:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}



#joinPrivateBtn {
    position: absolute;
    top: 70px;           /* Slightly higher from the bottom */
    right: 30px;            /* Slightly more from the right */
    width: 60px;            /* Increased size */
    height: 60px;           /* Increased size */
    padding: 0;
    background: none;       /* No background */
    color: #333;
    border: none;
    border-radius: 50%;     /* Keep circular shape */
    font-size: 32px;        /* Slightly larger for icon/smiley */
    font-weight: bold;
    z-index: 10001;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;       /* Remove shadow for cleaner transparent look */
    transition: transform 0.2s ease, color 0.2s ease;
}




#joinPrivateBtn:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}









#acceptJoinBtn {
    position: absolute;
    top: 130px;              /* Top right corner */
    right: 50px;
    width: 40px;            /* Increased size */
    height: 40px;           /* Increased size */
    padding: 0;
    background: none;       /* No background */
    color: #333;
    border: none;
    border-radius: 50%;
    font-size: 32px;        /* Slightly larger icon/text */
    font-weight: bold;
    z-index: 10001;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;       /* Remove shadow if you want fully clean look */
    transition: transform 0.2s ease;
}
#acceptJoinBtn.flashing {
    animation: flashBtn 0.4s linear 2;
}
@keyframes flashBtn {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: #ffe066; }
    50% { box-shadow: 0 0 32px 8px #fff700; background: #fff700; }
}



/* Private Join Button */
.accept-private-btn {
	 position: absolute;
    top: 50px;              /* Top right corner */
    left: 60px;
    width: 20px;            /* Increased size */
    height: 20px;           /* Increased size */
    padding: 0;
    background: none;       /* No background */
    color: #333;
    border: none;
    border-radius: 50%;
    font-size: 32px;        /* Slightly larger icon/text */
    font-weight: bold;
    z-index: 10001;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;       /* Remove shadow if you want fully clean look */
    transition: transform 0.2s ease;
    
	
}

.accept-private-btn:hover {
    background-color: #e64a19; /* Darker red on hover */
}

/* Optional: To differentiate both buttons more, use different icons or text styles */
.accept-join-btn::after {
    content: "🔓"; /* You can add an icon or text to show that this is for regular join */
    margin-left: 5px;
}

.accept-private-btn::after {
    content: "🔒"; /* Lock icon to signify private session */
    margin-left: 5px;
}




#publisherFullscreenWrapper.split {
display: flex !important;
flex-direction: row !important;
width: 100vw !important;
height: 100vh !important;
}


#publisherFullscreenWrapper.split #publisherVideo { 
	width: 50vw !important; 
	height: 100vh !important;
	object-fit: cover !important;
	display: block !important;
	position: relative !important;
}




#publisherFullscreenWrapper.split #subscriberVideoWrapper {
	width: 50vw !important; 
	height: 100vh !important; 
	display: flex !important; 
	align-items: center !important; 
	justify-content: center !important; '
	position: relative !important;
}


#publisherFullscreenWrapper.split #subscriberVideo { 
	width: 100% !important; 
	height: 100% !important; 
	object-fit: cover !important; 
	border-left: 2px solid #ccc !important; 
	background: #000 !important; 
	display: block !important;
}

/* Hide subscriber video wrapper by default */
#subscriberVideoWrapper {
    display: none !important;
}



#publisherFullscreenWrapper.split #publisherUsernameBox { 
	position: absolute !important; 
	left: 30px !important; 
	top: 30px !important;
	z-index: 10000 !important; 
	background: rgba(0,0,0,0.5) !important;
	color: #fff !important; 
	padding: 8px 16px !important; 
	border-radius: 8px !important;
} /* Subscriber username on right */ 


#publisherFullscreenWrapper.split #subscriberUsernameBox { 
	position: absolute !important;
	right: 30px !important; 
	top: 30px !important; 
	z-index: 10000 !important; 
	background: rgba(0,0,0,0.5) !important;
	color: #fff !important; 
	padding: 8px 16px !important;
	border-radius: 8px !important; 
}

#publisherEndSplitBtn { 
	position: absolute; 
	bottom: 20px; /* Align with bottom of publisher video */ 
	left: 50%; /* Center horizontally within publisher video container */ 
	transform: translateX(-50%); /* Center the button exactly */ 
	background-color: #ff0000; /* Red button */ 
	color: white; 
	padding: 10px 20px; 
	border: none; 
	cursor: pointer; z-index: 10000;
	border-radius: 6px !important;
} /* Position End Split Button for subscriber at the bottom center of the subscriber's video */ 


#subscriberEndSplitBtn { 
	position: absolute; 
	bottom: 20px; /* Align with bottom of subscriber video */ 
	left: 50%; /* Center horizontally within subscriber video container */ 
	transform: translateX(-50%); /* Center the button exactly */ 
	background-color: #ff0000;/* Red button */ 
	color: white; 
	padding: 10px 20px; 
	border: none; 
	cursor: pointer;
	z-index: 10000; 
	border-radius: 6px !important;
}


/* Hover effect for buttons */
#publisherEndSplitBtn:hover, #subscriberEndSplitBtn:hover {
    background-color: #cc0000;  /* Darker red on hover */
}



.mycred-balance {
    font-size: 14px;
    color: #f39c12;
    display: block;
    margin-top: 5px;
}

.send-points-button {
    position: absolute;      /* Position relative to the #publisherFullscreenWrapper */
    top: 20px;               /* 20px from the top of the screen */
    left: 50%;               /* Center horizontally */
    transform: translateX(-50%); /* Offset by half of its width to truly center */
    z-index: 10;             /* Ensure it appears on top of other elements */
    padding: 12px 20px;      /* Add padding for button size */
    background-color: #ff5722; /* Custom orange color */
    color: white;            /* White text color */
    font-size: 16px;         /* Slightly larger text */
    border: none;            /* No border */
    border-radius: 25px;     /* Rounded corners for the button */
    cursor: pointer;        /* Show a pointer cursor to indicate it's clickable */
    text-align: center;      /* Center the text */
    transition: background-color 0.3s; /* Smooth transition for hover */
}

.send-points-button:hover {
    background-color: #e64a19; /* Darker shade for hover effect */
}

#publisherVideo {
    width: 100%;
  height:100%;
    object-fit: cover;
    display: block;
	;
}
















#publisherSubscriberGrid video,
#publisherSubscriberGrid .subscriberVideo {
    width: 100%;
   height:100%;
    object-fit: cover;
}




#publisherSubscriberGrid.layout-1 {
    width: 100% ;
    height: 100%;
    display: grid;
}

#publisherSubscriberGrid.layout-1 #publisherVideo {
    /* Solo publisher: full size (your existing style applies) */
}




#publisherSubscriberGrid.layout-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 100vw;
    height: 100vh;

}

#publisherSubscriberGrid.layout-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* Two columns */
  grid-template-rows: 50% 50%  !important;     /* Two rows */
  width: 100vw;
  height: 100vh;
  grid-template-areas:
    "publisher publisher"
    "subscriber1 subscriber2";
}

/* Publisher spans both columns in the top row */
#publisherSubscriberGrid.layout-3 > #publisherVideo {
  grid-area: publisher;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* First subscriber in bottom left */
#publisherSubscriberGrid.layout-3 > .subscriberWrapper:nth-of-type(1) {
  grid-area: subscriber1;
  width: 100%;
  height: 100%;
}

/* Second subscriber in bottom right */
#publisherSubscriberGrid.layout-3 > .subscriberWrapper:nth-of-type(2) {
  grid-area: subscriber2;
  width: 100%;
  height: 100%;
}





#publisherSubscriberGrid.layout-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100vw;
    height: 100vh;
    gap: 10px;
}
#publisherSubscriberGrid.layout-4 > video,
#publisherSubscriberGrid.layout-4 > .subscriberVideo,
#publisherSubscriberGrid.layout-4 > .subscriberWrapper {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



#subscribersContainer {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}


.subscriberWrapper {
    position: relative;
    display: inline-block; /* or use your grid/flex settings */
}

.subscriberVideo {
    width: 100%; /* or your desired video size */
    display: block;
}

.subUsernameBox {
    position: absolute;
    bottom: 10px;           /* 10px from the bottom */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 1.4em;
    pointer-events: none;
    z-index: 10000;
    top: auto;              /* Ensure top is not set */
}

.gridControlBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10001;
    margin-left: 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 1.2em;
}

#gridMinimizeBtn { right: 70px; }
#gridRestoreBtn { right: 40px; }
#gridCloseBtn   { right: 10px; }









/* For layouts with the grid (layout-2, layout-3, layout-4) */
#publisherSubscriberGrid.layout-2, 
#publisherSubscriberGrid.layout-3, 
#publisherSubscriberGrid.layout-4 {
    width: 100% !important;
    height: 80% !important; /* 80% of the viewport height */
    position: relative !important;
    overflow: hidden !important;
}








/* Chat box for grid layouts 2, 3, and 4 */
#publisherSubscriberGrid.layout-2 #publisherChatBox,
#publisherSubscriberGrid.layout-3 #publisherChatBox,
#publisherSubscriberGrid.layout-4 #publisherChatBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh; /* 20% of the viewport height */
    background: rgba(0, 0, 0, 0.8);
    z-index: 10001;
    font-size: 1rem;
    padding: 10px;
    display: block; /* Show chat box */
    box-shadow: none; /* Remove shadow for grid layouts */
}












/* Restoring chat box behavior for layouts 2, 3, and 4 */
#publisherSubscriberGrid.layout-2 #publisherChatBox,
#publisherSubscriberGrid.layout-3 #publisherChatBox,
#publisherSubscriberGrid.layout-4 #publisherChatBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 1rem;
    padding: 10px;
    display: block;
    z-index: 10001;
    box-shadow: none;
}


@media (max-width: 600px) {
    #publisherSubscriberGrid.layout-2 #publisherChatBox,
    #publisherSubscriberGrid.layout-3 #publisherChatBox,
    #publisherSubscriberGrid.layout-4 #publisherChatBox {
        height: 20vh;
        min-height: 120px; /* fallback for small screens */
        max-height: 40vh;
        width: 100vw;
        left: 0;
        bottom: 0;
        position: fixed;
        z-index: 10001;
    }
}



#publisherFullscreenWrapper.minimized video,
#publisherSubscriberGrid.minimized video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: 200px !important;
    max-height: 350px !important;
}


#publisherFullscreenWrapper.minimized {
    top: auto !important;
    left: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 200px !important;
    height: 350px !important;
    background: transparent !important;
}


#publisherSubscriberGrid.minimized {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 10003 !important;
}



/* Control visibility of elements inside the minimized wrapper */
#publisherFullscreenWrapper.minimized #publisherChatBox,
#publisherFullscreenWrapper.minimized #publisherUsernameBox,
#publisherFullscreenWrapper.minimized #subscriberUsernameBox,
#publisherFullscreenWrapper.minimized .send-points-button,
#publisherFullscreenWrapper.minimized #subUsernameBox,   {
    visibility: hidden !important;  /* Hide these elements when minimized */
    opacity: 0; /* Optional: Make sure they are not clickable */
}

/* On restoring, the elements should be visible again */
#publisherFullscreenWrapper:not(.minimized) #publisherChatBox,
#publisherFullscreenWrapper:not(.minimized) #publisherUsernameBox,
#publisherFullscreenWrapper:not(.minimized) #subscriberUsernameBox,
#publisherFullscreenWrapper:not(.minimized) .send-points-button {
    visibility: visible !important;
    opacity: 1;  /* Ensure they are visible and clickable */
}


/* Ensure that the height is 100vh during private mode */
#publisherSubscriberGrid.private-mode {
    height: 100vh !important;  /* Override any other height settings with !important */
}


.chatBox {
  width: 100%;
  height: 20vh;
  display: block;
  z-index: 1000;
  background: #000;
  color: #fff;
  font-weight: bold;
  position: fixed;
  bottom: 0;
  left: 0;
}

@media (max-width: 600px) {
  .chatBox {
    position: sticky; /* Or fixed, depending on your preference */
    width: 100vw;
    height: 25vh;
    font-size: 16px;
  }
}

.hidden {
  display: none !important;
}











/* Make Google login button just the logo */
.um-social-login-google {
    background: none !important;   /* Remove background */
    color: transparent !important; /* Hide text */
    width: 40px;                   /* Adjust width to match logo */
    height: 40px;                  /* Adjust height to match logo */
    padding: 0 !important;
    border-radius: 50%;            /* Optional: make it circular */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Insert Google logo */
.um-social-login-google::before {
    content: url('https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg');
    width: 100%;
    height: 100%;
}





/* Basic modal styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

/* Modal content box styling */
.modal-content {
    position: relative;
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
}

/* Close button styling */
.close {
    position: absolute;
    top: 10px; /* Adjusts position from the top */
    right: 10px; /* Adjusts position from the right */
    font-size: 20px; /* Size of the "X" */
    color: #333; /* Color of the "X" */
    cursor: pointer; /* Makes it clickable */
    padding: 5px 10px; /* Adds some padding around the "X" */
    background-color: transparent; /* Ensures no background */
    border: none; /* Removes border */
    border-radius: 50%; /* Makes it a circle around the "X" */
    transition: background-color 0.3s; /* Adds a smooth hover effect */
}

/* Close button hover effect */
.close:hover {
    background-color: #f0f0f0; /* Light background on hover */
    color: #000; /* Darken the "X" on hover */
}








.count-side li a.current:hover {
    background: #000 !important;
    color: #FFD700 !important; /* Yellow */
}

.um-modal-btn {
    background: #000 !important;
    color: #FFD700 !important; /* Yellow */
    cursor: pointer !important;
    line-height: 34px !important;
    height: 34px;
    display: inline-block;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 0 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    box-sizing: border-box;
    transition: .2s;
    text-decoration: none !important;
}








.picker__nav--next:hover,
.picker__nav--prev:hover,
.um .um-field-group-head,
.um .um-members-pagi span.current,
.um .um-members-pagi span.current:hover,
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover,
.um-modal-btn,
.um-modal-btn.disabled,
.um-modal-btn.disabled:hover,
.um-modal-header,
.upload,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover {
    background: #ffe600 !important; /* light yellow */
    color: #000 !important;         /* black text */
}

.um-profile-nav-item.active a,
.um-profile-nav-item.active a:hover {
    color: #000 !important;         /* black text */
}




.um .um-cover-add:hover,
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um .um-item-meta a,
.um .um-member-less a:hover,
.um .um-member-more a:hover,
.um .um-member-name a:hover,
.um .um-members-pagi a:hover,
.um .um-profile-subnav a.active,
.um .um-tip:hover,
.um-account-name a:hover,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon,
.um-dropdown li a:hover,
i.um-active-color,
span.um-active-color {
    color: #000000 !important;
}




.menu .menu-item .sub-menu .menu-link, .ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-link {
     background-color: #000000 !important;
}