/* video column */
.video-layout .video-column {
    width: 100%;
}

/* .video-layout .chat-column {
    display: none;
} */

/* chat */
.chat .message.no-image {
    padding-left: 15px;
}

.chat .message .content .text img.emoticon-img,
.chat .private-message .content .text img.emoticon-img,
.counter-form .message .content .text img.emoticon-img,
.counter-form .private-message .content .text img.emoticon-img {
    margin: 0;
}

.chat .message .content .name:hover,
.chat .private-message .content .name:hover,
.counter-form .message .content .name:hover,
.counter-form .private-message .content .name:hover {
    color: #a2a2a2;
}

.chat .message.action .name,
.chat .message.action .name:hover {
    font-weight: bold;
    color: #2DB72D;
}

/* player */
.video-layout .video-wrapper .video-cover .video-container {
    width: 100%;
    height: 100%;
    /* position: relative; */ /* Will be handled by a more generic .video-container selector */
    /* overflow: hidden; */   /* Will be handled by a more generic .video-container selector */
}

/* Ensure video hierarchy takes full height */
.video-wrapper, /* This is element with id #video_chat_wrapper */
.video-cover {
    height: 100%;
    position: relative; /* Good for any absolutely positioned children they might have directly */
}

.video-container { /* This is element with id #video_container */
    width: 100%;
    height: 100%;
    position: relative;   /* Makes this the positioning context for its children, like .player-controls */
    overflow: hidden;     /* Prevents scrollbars if children slightly overflow */
}

.player-controls {
    position: absolute;
    bottom: 14px; 
    left: 0;
    right: 0;
    height: 44px; /* Reduced height to better fit content and potentially reveal slider */
    padding: 5px 10px; /* Adjusted padding for new height */
    display: flex;
    align-items: center; 
    box-sizing: border-box;
    z-index: 100;
}

.player-controls-left {
    /* This div groups items on the left. Flex properties handled by its children or parent. */
}

.player-controls-spacer {
    flex-grow: 1; /* This will push left and right groups to the edges */
}

.player-controls-right {
    /* This div groups items on the right. Flex properties handled by its children or parent. */
}

.player-controls-left-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start of the column */
    /* gap: 4px; */ /* Optional: if you prefer gap for spacing */
}

.player-controls-left-group .player-button-wrapper.fullscreen-button-wrapper {
    margin-bottom: 4px; /* Space between fullscreen button and live status */
    margin-left: 0; /* Override general player-button-wrapper margin-left if any */
}

.player-controls .player-button-wrapper {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    position: relative;
}

.player-controls .player-button {
    /* height: 40px; */
    /* min-width: 40px; */
    border-radius: 4px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none; /* Assuming no border is desired for the final look */
    background-color: transparent; /* Make button background transparent, rely on icon */
}

.player-ico {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
    display: inline-block; /* Helps with consistent alignment and sizing */
    line-height: 1;      /* Reset line height for the icon container itself */
    color: #54ec12;
}

.player-ico::before {
    font-size: 1.8em; /* Relative to parent .player-ico font-size, which will be set by button */
    /* line-height: 1.67; */ /* Can interfere with precise vertical centering, use relative positioning */
    position: relative;
    top: 1px; /* User request: move 2px up */
}

.player-ico.ico-mute::before {
    content: "\f107";
    /**/
}

.player-button.muted .player-ico.ico-mute::before {
    content: "\f104";
}

.player-ico.ico-fullscreen::before {
    content: "\f108";
}

/* volume slider */
.player-controls .volume-slider-wrapper {
    display: none;
    position: absolute;
    top: -150px;
    width: 40px;
    height: 150px;
    text-align: center;
}

.player-controls .volume-slider-wrapper .inner {
    background-color: #222;
    padding: 15px 5px;
    border-radius: 4px;
    width: 40px;
    height: 140px;
}

.player-controls .hovered .volume-slider-wrapper,
.player-controls .active .volume-slider-wrapper {
    display: block;
}

.ui-slider-vertical {
    width: .4em;
    height: 100px;
    position: relative;
    display: inline-block;
}

.ui-widget.ui-widget-content {
    background-color: rgba(115, 133, 159, 0.5);
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    background-color: #ff9100;
    width: 100%;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.ui-slider .ui-slider-handle {
    position: absolute;
}

.ui-slider .ui-slider-handle::before {
    background-color: #ff9100;
    display: block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    content: "";
    margin-left: -0.45em;
    margin-bottom: -0.2em;
}


#video-container_audio_slider {

}

#video-container_audio_button,
#video_container_fullscreen_button {
    height: 25px;
    width: auto; 
    padding-left: 5px; 
    padding-right: 5px; 
    min-width: auto;
    font-size: 14px;
    line-height: 25px; 
    /* color: #fff; */ /* Default color, will be overridden for fullscreen */
    vertical-align: top;
    border-radius: 4px;
    padding: 0; /* Overrides previous padding for direct icon centering */
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none !important;
}

#video-container_audio_button {
    /* Modern styling */
    background-image: url('/static/index/img/audio-icon-modern.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 60% !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

#video-container_audio_button:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
}

#video-container_audio_button.muted {
    background-image: url('/static/index/img/audio-muted-icon-modern.svg') !important;
    background-color: rgba(255, 0, 0, 0.2) !important;
}

/* Remove any existing pseudo-elements */
#video_container_audio_button::before,
#video_container_audio_button::after {
    content: none !important;
}

#video_container_fullscreen_button {
    /* Resetting potentially harmful absolute positioning properties */
    position: static !important; /* Crucial: Keep it in the flex flow of its parent */
    left: auto !important;
    right: auto !important; 
    top: auto !important;
    bottom: auto !important;

    /* Intended dimensions and appearance */
    height: 25px !important;
    width: auto !important; 
    padding-left: 5px !important; 
    padding-right: 5px !important; 
    font-size: 14px !important; /* Ensures icon scaling base is correct */
    line-height: 25px !important; 
    color: green !important; /* Target color */
    background-image: none !important; /* Already there, but confirm */
    
    /* Debug visibility */
    z-index: 999 !important;             
    opacity: 1 !important;               
    visibility: visible !important;      

    /* Inherited from the more general rule, but good to be explicit if needed */
    display: flex !important; /* Ensure it remains a flex container for its icon */
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-align: center !important;
    vertical-align: top !important; /* Though flex align-items should handle this */
    min-width: auto !important; 
    padding: 0 !important; /* Overrides padding-left/right above if we want EXACT icon fit */
                           /* Choose: padding for space OR padding:0 for exact fit centered */
                           /* Let's stick to padding:0 for now and let the auto width + flex center work */
}

#video-container_audio_button::after,
/* #video-container_fullscreen_button::after { */ /* REMOVE THIS BLOCK */
/*    font-family: VideoJS; */
/*    font-weight: normal; */
/*    font-style: normal; */
/*    font-size: 1.8em; */
/*    line-height: 1.67; */
/* } */

#video-container_audio_button::after {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
    font-size: 1.8em;
    line-height: 1.67;
    content: "\f107"; /* Volume icon */
}

/* REMOVE or COMMENT OUT this entire block for #video-container_fullscreen_button::after */
/*
#video-container_fullscreen_button::after {
    content: "\f108";
}
*/

/* fullscreen */

:full-screen .chat-buttons {
    /*margin-top: -100px;*/
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 85%;
    padding: 5px;
}

:-ms-fullscreen .chat-buttons {
    /*margin-top: -100px;*/
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 85%;
    padding: 5px;
}

:-webkit-full-screen .chat-buttons {
    /*margin-top: -100px;*/
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 85%;
    padding: 5px;
}

:-moz-full-screen .chat-buttons {
    /*margin-top: -100px;*/
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 85%;
    padding: 5px;
}

/* model report preloader */

.model-dropdown .lds-dual-ring {
    width: 34px;
    height: 34px;
    vertical-align: middle;
    margin-right: 20px;
}

/* owl */

.peeping-cover .caption {
    /*background: rgba(0, 0, 0, 0.9);*/
    background: rgba(34, 34, 34, 1);
}

.poster-slider-wrapper {
    padding: 10px 50px;
}

.poster-slider {
    visibility: hidden;
}

.poster-slider .poster {
    background-color: rgba(49,49,49,0.1);
    max-width: 100%;
}

.poster-slider .poster:hover {
    background-color: rgba(49,49,49,0.9);
}

.poster-slider.owl-loaded {
    visibility: visible;
    display: block;
    overflow: visible;
    position: relative;
    max-width: 100%;
}

.poster-slider.owl-loaded .owl-stage-outer {
    overflow: hidden;
    display: flex;
}
.poster-slider .owl-item {
    -webkit-transform: none;
   transform: none;
}

.poster-slider.owl-loaded .owl-item {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
}

.poster-slider.owl-loaded .owl-prev,
.poster-slider.owl-loaded .owl-next {
    font-size: 18px;
    color: #ff9100;
    cursor: pointer;
    position: absolute;
    top: 50%;
    height: 40px;
    width: 40px;
    line-height: 40px;
    margin-top: -20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.poster-slider.owl-loaded .owl-prev:hover,
.poster-slider.owl-loaded .owl-next:hover {
    color: white;
}

.poster-slider.owl-loaded .owl-prev {
    left: -20px;
    text-align: left;
}

.poster-slider.owl-loaded .owl-next {
    right: -20px;
    text-align: right;
}

/* player header controls */

.player-header-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 60px;
    text-align: right;
    padding: 10px;
}

/* user video container */
.user-video-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: auto;
}

.user-video-container .user-video-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    text-align: right;
    z-index: 10;
}

.user-video-container .user-video-controls .user-video-btn {
    height: 30px;
    width: 30px;
    background-color: #222;
    border-radius: 4px;
    padding: 0;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    outline: none;
    border: none;
    margin-left: 5px;
}

/* --- Custom styles for video-chat-header (Pornhub-like) --- */
/* Use a more specific selector to increase precedence */
#video_chat_wrapper #video-chat-header {
    display: none !important;
    /* Remove any existing styles that might affect layout */
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

/* Style specific elements *inside* the header */
/* Add the more specific selector here too */
#video_chat_wrapper #video-chat-header .chat-title,
#video_chat_wrapper #video-chat-header h2,
#video_chat_wrapper #video-chat-header h3 {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1em;
    margin: 0;
    margin-right: auto;
}

#video_chat_wrapper #video-chat-header .icon,
#video_chat_wrapper #video-chat-header button,
#video_chat_wrapper #video-chat-header .header-control a
{
    color: #ff9000; /* Pornhub orange accent */
    background: none;
    border: none;
    padding: 5px;
    font-size: 1.2em;
    cursor: pointer;
    margin-left: 10px;
    text-decoration: none;
}

#video_chat_wrapper #video-chat-header button:hover,
#video_chat_wrapper #video-chat-header .header-control a:hover,
#video_chat_wrapper #video-chat-header .icon:hover {
    color: #ffffff; /* White on hover */
}

/* --- End Custom styles --- */

.gift-menu.active {
    max-height: 300px !important;
    opacity: 1 !important;
}

/* Default styles for gifts (desktop) */
/* Main gifts container - ensure it's below the video */
#gifts-container-fixed {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: rgba(0,0,0,0.7); /* Already in inline style */
    /* padding: 10px; */ /* Already in inline style */
    /* border-radius: 8px; */ /* Already in inline style */
    /* margin-top: 15px; */ /* Add space if not already handled by placement */
    width: 100%; /* It will take the width of its parent */
    box-sizing: border-box;
    clear: both; /* Ensure it's below floated elements if any */
    /* min-height: 100px; */ /* Already in inline style */
}

/* Owl Carousel instance */
#gifts-container-fixed .gallery.owl-carousel {
    width: 100%;
    /* max-width: 90%; /* Consider if this is needed */
    margin-bottom: 10px; /* Space before dots */
}

/* Individual gift items within Owl Carousel */
#gifts-container-fixed .owl-item figure.gift-cover {
    text-align: center;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    transition: background 0.3s ease;
    cursor: pointer;
    display: block;
    width: 100%; /* Make gift-cover use the full width of owl-item */
}

#gifts-container-fixed .owl-item figure.gift-cover:hover {
    background: rgba(255,255,255,0.15);
}

#gifts-container-fixed .owl-item figure.gift-cover img {
    max-width: 70px; /* Default desktop gift image size */
    max-height: 70px; /* Default desktop gift image size */
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#gifts-container-fixed .owl-item figure.gift-cover figcaption {
    font-size: 12px; /* Default desktop caption size */
    color: #ddd;
}

/* Dots navigation */
#gifts-container-fixed .bottom-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#gifts-container-fixed .bottom-dots .owl-dot { /* Adjusted to match HTML */
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    border: none;
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
}

#gifts-container-fixed .bottom-dots .owl-dot.active {
    background: #ffb545; /* Active dot color */
}


/* Mobile styles for gifts */
@media (max-width: 767px) {
    #gifts-container-fixed {
        width: 100% !important; /* Ensure it takes full width of its parent (.video-column via placeholder) */
        max-width: 100% !important; /* Override any other max-width that might be shrinking it */
        padding-left: 5px; /* Minimal padding if needed, adjust */
        padding-right: 5px; /* Minimal padding if needed, adjust */
        /* The inline style from JS already sets box-sizing: border-box, display:flex, flex-direction:column, align-items:center */
    }

    #gifts-container-fixed .gallery.owl-carousel {
        width: 100% !important; /* Ensure carousel content area uses full width of #gifts-container-fixed */
        max-width: 100% !important; /* Override the 90% max-width from JS inline styles */
        /* margin-left: 0; */ /* Ensure no extra margins pushing it */
        /* margin-right: 0; */
    }

    #gifts-container-fixed .owl-item {
        /* If gifts are too large on mobile, adjust their min-width or contents here */
        /* For example, to make them smaller: */
        /* min-width: 70px !important; */ /* Adjust as needed */
    }

    #gifts-container-fixed .owl-item .gift-cover img {
        /* max-width: 40px !important; */ /* Example: smaller images on mobile */
        /* max-height: 40px !important; */
    }

    /* Add other mobile-specific adjustments for gifts if necessary */
}

/* === Custom Gift Carousel Styles === */
.custom-gift-carousel-wrapper {
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background */
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    width: 100%;
    box-sizing: border-box;
}

.custom-gift-tabs {
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens if needed */
    justify-content: center; /* Center tabs */
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

button.custom-gift-tab-button {
    background-color: rgba(255, 255, 255, 0.1);
    color: #eee;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button.custom-gift-tab-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

button.custom-gift-tab-button.active {
    background-color: #ffb545; /* Active tab color - from old SVG stars */
    color: #2c2c2c; /* Darker text for active tab */
    border-color: #ffb545;
    font-weight: bold;
}

.custom-gift-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align items to the start, allow wrapping for grid */
    gap: 10px; /* Spacing between gift items */
}

.custom-gift-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px;
    width: 120px; /* Fixed width for grid item */
    min-height: 150px; /* Ensure consistent height */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space for name/price */
    box-sizing: border-box;
}

.custom-gift-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.custom-gift-item img {
    max-width: 60px;  /* Adjusted from 80px for a slightly smaller default gift image */
    max-height: 60px; /* Adjusted from 80px */
    display: block;
    margin: 0 auto 10px auto; /* Increased bottom margin */
}

.custom-gift-item .custom-gift-name {
    font-size: 13px;
    font-weight: bold;
    color: #f0f0f0;
    margin-bottom: 5px;
    word-wrap: break-word;
    line-height: 1.2;
    flex-grow: 1; /* Allow name to take available space */
}

.custom-gift-item .custom-gift-price {
    font-size: 12px;
    color: #ffb545; /* Price color to match active tab/stars */
    font-weight: bold;
}

/* Optional: A message area if needed, like the old tooltip */
.custom-gift-footer-message {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure share screen element does not interfere when hidden */
#share-screen-element[style*="visibility: hidden"],
#share-screen-element:not([style*="visibility: visible"]) {
    display: none !important;
    pointer-events: none !important; /* Belt and braces */
}

/* Optional: If you want to ensure it's hidden by default unless explicitly made visible */
/* #share-screen-element {
    display: none !important; 
} 
#share-screen-element[style*="visibility: visible"] {
    display: block !important; /* Or whatever its intended display type is when visible */
/* } */

/* General Popup Styling - Ensure they are on top */
.popup-overlay, /* Common class for a full-screen overlay */
.popup-container, /* Common class for the popup box itself */
#popupLogin,
#popupSign, /* Add the signup popup */
.popup.showed, /* Target any popup with showed class */
.popup.active { /* Target any popup with active class */
    z-index: 10000 !important; /* Very high value to ensure it's above everything */
    position: fixed !important; /* Fixed positioning to ensure it's above everything */
}

/* Specific targeting for the popup structure */
.popup {
    z-index: 10000 !important;
    position: fixed !important;
}

.popup .inner {
    z-index: 10001 !important;
    position: relative !important;
}

/* If #popupLogin is just the content, and it's wrapped by something like .popup_container_basic */
.popup_container_basic { /* This is a class often used by pc.js popups */
    z-index: 9999 !important; /* Overlay wrapper */
}
.popup_container_basic .popup_content_wrapper { /* The actual content box */
     z-index: 10000 !important;
     position: relative; /* Ensure content is above its own wrapper's potential background */
}

/* Ensure the main page overlay (if used by your CallPopup) is also high */
#overlay { /* A common ID for general page overlays */
    z-index: 9990 !important; 
}

/* Lower z-index for player controls and toy sections when popups are active */
body:has(.popup.showed) .player-controls,
body:has(.popup.active) .player-controls {
    z-index: 50 !important;
}

body:has(.popup.showed) .toy-section,
body:has(.popup.active) .toy-section,
body:has(.popup.showed) .video-cover .toy-section,
body:has(.popup.active) .video-cover .toy-section {
    z-index: 40 !important;
}

/* Fallback for browsers that don't support :has() */
.popup-active .player-controls {
    z-index: 50 !important;
}

.popup-active .toy-section,
.popup-active .video-cover .toy-section {
    z-index: 40 !important;
}

/* === Mobile Responsive Toy Controls === */
@media (max-width: 768px) {
    /* Make toy section more visible and accessible */
    .toy-section.video-overlay-toys {
        top: 5px !important; /* Reduced from 10px */
        right: 5px !important;
        margin-top: 0 !important; /* Removed extra margin */
        z-index: 1000 !important;
        background: rgba(0,0,0,0.7) !important;
        border-radius: 8px !important;
        padding: 5px !important;
    }

    /* Make dropdown menu more accessible */
    .toy-section.video-overlay-toys .dropdown-menu {
        min-width: 250px !important;
        max-width: calc(100vw - 40px) !important;
        left: -100% !important;
        padding: 10px !important;
        background: rgba(0,0,0,0.9) !important;
        margin-top: 5px !important;
    }

    /* Make anchor button more prominent */
    .toy-section.video-overlay-toys .mobile-anchor {
        width: 36px !important;
        height: 36px !important;
        background: #ff9000 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    }

    .toy-section.video-overlay-toys .mobile-anchor i {
        color: white !important;
        font-size: 18px !important;
    }

    /* Ensure toy buttons are properly sized */
    #obscuracams-dynamic-toy-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 5px !important;
    }
}

@media (max-width: 1024px) {
    /* Make toy section more responsive to video wrapper size */
    .video-layout .video-cover .toy-section {
        top: 20px !important;
        right: 10px !important; /* Reduced from 75px for better mobile fit */
        margin-top: 50px !important; /* Reduced from 62px */
        max-width: calc(100vw - 40px) !important; /* Ensure it doesn't exceed screen width */
    }
    
    /* Make dropdown menu responsive and smaller */
    .video-layout .video-cover .toy-section .dropdown-menu {
        min-width: 250px !important; /* Reduced from 300px */
        max-width: calc(100vw - 40px) !important; /* Responsive to screen width */
        width: auto !important;
        left: -100% !important; /* Adjusted to center better */
        padding: 20px 15px 15px !important; /* Reduced padding */
    }
    
    /* Target the actual dynamic toy buttons container */
    #obscuracams-dynamic-toy-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 10px !important;
        max-width: 100% !important;
    }
    
    /* Make individual toy button items sized to content, not fixed width */
    #obscuracams-dynamic-toy-buttons .item {
        flex: 0 0 auto !important; /* Size to content, not percentage */
        min-height: auto !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Center content */
        text-align: center !important;
        box-sizing: border-box !important;
        width: auto !important; /* Auto width based on content */
        max-width: none !important;
    }
    
    /* Make images bigger - 2x the previous size */
    #obscuracams-dynamic-toy-buttons .item img {
        max-height: 70px !important; /* 2x bigger than 35px */
        max-width: 70px !important;
        width: auto !important;
        height: auto !important;
        margin: 3px auto !important;
    }
    
    /* Make vibe stars bigger too */
    #obscuracams-dynamic-toy-buttons .item .vibe-stars {
        max-height: 60px !important; /* 2x bigger */
        max-width: 120px !important;
        width: auto !important;
        height: auto !important;
        margin: 3px auto !important;
    }
    
    #obscuracams-dynamic-toy-buttons .item .vibe-stars svg {
        max-height: 50px !important; /* 2x bigger */
        max-width: 100px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Scale down text */
    #obscuracams-dynamic-toy-buttons .item .count {
        font-size: 12px !important;
        line-height: 1.1 !important;
        margin: 2px 0 !important;
    }
    
    #obscuracams-dynamic-toy-buttons .item .count .caption {
        font-size: 8px !important;
        line-height: 1 !important;
    }
    
    #obscuracams-dynamic-toy-buttons .item .title {
        font-size: 11px !important;
        line-height: 1.1 !important;
        margin: 2px 0 !important;
        white-space: nowrap !important;
    }
    
    /* Reduce mobile anchor size for better proportions */
    .video-layout .video-cover .toy-section .mobile-anchor {
        width: 36px !important; /* Reduced from 40px */
        height: 36px !important; /* Reduced from 40px */
    }
}

@media (max-width: 480px) {
    /* Additional mobile optimizations */
    .player-controls {
        display: none !important;
    }
    
    /* Ensure messages are even more compact on small screens */
    #video-chat-history {
        max-height: 35vh !important; /* Smaller on very small screens but still reasonable */
        font-size: 12px !important;
        padding: 8px !important;
        bottom: 55px !important; /* Adjust for smaller screens */
        left: 5px !important;
        right: 5px !important;
    }
    
    /* Smaller chat input on very small screens */
    #video-chat-form-container {
        padding: 3px !important;
        bottom: 5px !important;
        left: 3px !important;
        right: 3px !important;
    }
    
    #video-chat-input {
        height: 30px !important;
        font-size: 12px !important;
        padding: 5px 8px !important;
    }
    
    #video-chat-submit {
        height: 30px !important;
        padding: 5 5px !important;
        font-size: 12px !important;
    }
    
    /* Smaller mobile actions */
    .mobile-actions {
        top: 5px !important;
        right: 5px !important;
    }
    
    /* Smaller dropdown on very small screens */
    .mobile-actions .dropdown-menu {
        min-width: 120px !important;
        padding: 8px !important;
    }
    
    .mobile-actions .dropdown-menu .option-btn {
        padding: 8px !important;
        font-size: 12px !important;
    }
    
    /* Smaller toy section */
    .video-layout .video-cover .toy-section {
        top: 10px !important;
        right: 2px !important;
        margin-top: 30px !important;
    }
    
    /* Even more compact buttons on very small screens */
    .chat-buttons {
        padding: 3px !important;
        height: 35px !important;
    }
    
    .chat-buttons button {
        font-size: 10px !important;
        padding: 5px 2px !important;
        height: 100% !important;
    }
    
    .chat-buttons .btn-small {
        height: auto !important;
        min-height: 25px !important;
    }
}

/* === End Mobile Responsive Toy Controls === */

/* Restore header and sections visibility */
#video_chat_wrapper #video-chat-header {
    display: block !important; /* Changed from none to block */
}

.main-header {
    display: block !important; /* Changed from none to block */
}

.main-footer {
    display: block !important; /* Changed from none to block */
}

/* Remove the rule that hides all sections except video */
.section:not(.video-section):not(#modelInfo),
.inner-section:not(.video-section):not(#modelInfo) {
    display: block !important; /* Changed from none to block */
}

/* Restore tags bar visibility */
.tags-bar {
    display: block !important; /* Changed from none to block */
}

/* Ensure private button is visible */
#private_button {
    display: inline-block !important;
}

/* Ensure all interactive buttons remain accessible */
.btn-primary, .btn-success, .btn-default {
    display: inline-block !important;
}

/* Override hidden-section for important controls */
.chat-buttons .hidden-section {
    display: block !important;
}

/* Ensure send tip button is visible */
.chat-buttons .col-xs-12:nth-child(3) {
    display: block !important;
}

/* Fix video wrapper dimensions */
.video-wrapper {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important;
}

.video-cover {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important;
}

/* Style chat buttons for mobile - MOVE TO BOTTOM OF SCREEN */
.chat-buttons {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 5px !important;
    background: rgba(0, 0, 0, 0.9) !important; /* Darker background */
    z-index: 1002 !important;
    /* Remove display: block - let JS control visibility */
}

/* Remove forced show - let JS handle it */
.video-column .chat-buttons {
    /* Removed display: block */
}

/* Style the history/messages to appear at bottom */
#video-chat-history {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    max-height: none !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

/* Style mobile dropdown finance buttons */
.mobile-actions .finance-buttons-mobile {
    width: 100% !important;
}

.mobile-actions .finance-buttons-mobile .option-btn {
    transition: background 0.2s ease !important;
}

.mobile-actions .finance-buttons-mobile .option-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.mobile-actions .finance-buttons-mobile .icon {
    color: #ff9000 !important; /* Orange color for finance icons */
}

/* Restore gifts section visibility */
#gifts-placeholder-below-video {
    display: block !important; /* Changed from none to block */
}

#gifts-container-fixed {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(0,0,0,0.7) !important;
    padding: 10px !important;
    border-radius: 8px !important;
    margin-top: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* Ensure gift carousel is visible */
#gifts-container-fixed .gallery.owl-carousel {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

/* Restore gift items visibility */
#gifts-container-fixed .owl-item figure.gift-cover {
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 6px !important;
    transition: background 0.3s ease !important;
    cursor: pointer !important;
}

/* Restore gift navigation dots */
#gifts-container-fixed .bottom-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Web View - Full Gifts Display */
#gifts-placeholder-below-video {
    display: block;
    margin: 15px 0;
}

#gifts-container-fixed {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.7);
    padding: 15px;
    border-radius: 8px;
    width: 100%;
}

/* Gift Items Styling */
#gifts-container-fixed .gift-cover {
    padding: 10px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

#gifts-container-fixed .gift-cover:hover {
    background: rgba(255,255,255,0.1);
}

#gifts-container-fixed .gift-cover img {
    max-width: 60px;
    max-height: 60px;
    margin-bottom: 5px;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    /* Hide desktop gifts */
    #gifts-placeholder-below-video,
    #gifts-container-fixed {
        display: none !important;
    }

    /* Mobile Gifts Button in Dropdown */
    .mobile-gifts-button {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        color: #ff9000;
        background: rgba(255,255,255,0.1);
        border-radius: 5px;
        margin: 5px 0;
        cursor: pointer;
    }

    .mobile-gifts-button i {
        font-size: 18px;
    }

    .mobile-gifts-button:hover {
        background: rgba(255,255,255,0.2);
    }
}

/* Video Container Styling */
#video_container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9; /* Maintain aspect ratio */
    background-color: #000 !important;
    position: relative !important;
}

/* Video Element Styling */
#video_container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Show full video without cropping */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    #video_container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 50 !important;
    }
    
    #video_container video {
        object-fit: contain !important;
    }
}

@media (max-width: 768px) {
    /* Reset mobile chat to default working state */
    #video-chat-history {
        position: fixed;
        bottom: 60px;
        left: 10px;
        right: 10px;
        max-height: 40vh;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 8px;
        padding: 10px;
        overflow-y: auto;
        z-index: 1005;
    }

    #video-chat-history-form-container {
        position: fixed;
        bottom: 10px;
        left: 5px;
        right: 5px;
        background: rgba(0, 0, 0, 0.9);
        padding: 5px;
        z-index: 1006;
        display: flex;
        align-items: center;
        border-radius: 20px;
    }

    #video-chat-input {
        flex: 1;
        height: 35px;
        font-size: 14px;
        padding: 5px 10px;
        border: 1px solid #444;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-radius: 20px;
        margin-right: 5px;
    }

    #video-chat-submit {
        height: 35px;
        padding: 0 5px;
        font-size: 14px;
        background: #ff9000;
        border: none;
        border-radius: 20px;
        color: white;
        cursor: pointer;
    }

    /* Hide duplicate buttons */
    .chat-buttons {
        display: none;
    }

    /* Ensure only one set of buttons is visible */
    .mobile-actions {
        display: block;
    }
}

.video-chat-gifts-btn {
    background-image: url('/static/index/img/gift-icon.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 30px !important;
    height: 30px !important;
    text-indent: -9999px !important; /* Hide text */
    border: none !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    /* Mobile Actions Dropdown */
    .mobile-actions {
        z-index: 1010 !important;
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
    }

    .mobile-actions .dropdown-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        background: rgba(0,0,0,0.9) !important;
        border-radius: 8px !important;
        padding: 10px !important;
        min-width: 180px !important;
        z-index: 1011 !important;
    }

    .mobile-actions.active .dropdown-menu {
        display: block !important;
    }

    .mobile-actions .option-btn {
        color: white !important;
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        text-align: left !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        pointer-events: auto !important; /* Critical fix */
    }

    .mobile-actions .option-btn i {
        color: #ff9000 !important;
        font-size: 18px !important;
    }

    .mobile-actions .separator {
        height: 1px;
        background: rgba(255,255,255,0.2);
        margin: 8px 0;
    }

    /* Ensure buttons are clickable */
    #mobile-buy-tokens,
    #mobile-private-chat,
    #mobile-send-tip,
    #mobile-profile-info {
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Fix for original buttons being hidden */
    #private_button,
    #buy_tokens_button,
    #send_tip_button {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        clip: auto !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
    }
}

/* Fix for existing dropdown classes */
.dropdown.inline.active .dropdown-menu {
    display: block !important;
}

.dropdown.inline .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    left: auto;
    background: rgba(0,0,0,0.9);
    border-radius: 8px;
    padding: 10px;
    min-width: 180px;
    z-index: 1010;
}

/* Ensure model info modal appears above video */
#modelInfo.active {
    z-index: 2000 !important; /* Higher than video's z-index */
    position: fixed !important;
    top: 10% !important;
    left: 5% !important;
    right: 5% !important;
    bottom: 10% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    overflow-y: auto !important;
    border-radius: 10px !important;
    padding: 20px !important;
    display: block !important;
}

/* Lower video z-index to allow modal to appear above */
@media (max-width: 768px) {
    #video_container {
        z-index: 50 !important; /* Lower than model info */
    }
}

/* Hide the private chat button */
#video-chat-go-private {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}