/**
 * Feature Flags CSS
 * 
 * Conditional styling based on enabled features
 * Uses data attributes for CSS targeting
 */

/* Hide elements when features are disabled */

/* When video is disabled, hide video elements */
:root:not([data-enable-video="true"]) [data-feature="video"] {
    display: none !important;
}

/* When audio is disabled, hide audio elements */
:root:not([data-enable-audio="true"]) [data-feature="audio"] {
    display: none !important;
}

/* When chat is disabled, hide chat elements */
:root:not([data-enable-chat="true"]) [data-feature="chat"] {
    display: none !important;
}

/* Styling for disabled features */
.feature-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Button styling when features are limited */
:root[data-enable-chat="true"]:root:not([data-enable-audio="true"]):root:not([data-enable-video="true"]) .start-free-call-btn {
    /* background-color: #4a9eff; */
}

:root[data-enable-audio="true"]:root:not([data-enable-video="true"]) .start-free-call-btn {
    /* background-color: #ff6b6b; */
}

/* Show/hide mode indicators */
.mode-indicator {
    display: none;
}

:root[data-enable-video="true"] .mode-indicator.video-only {
    display: inline;
}

:root[data-enable-audio="true"] .mode-indicator.audio-only {
    display: inline;
}

:root[data-enable-chat="true"] .mode-indicator.chat-only {
    display: inline;
}