/*
 * Plugin: Hakeemify Doctor Twilio Styles
 * File: twilio-styles.css
 * Description: Basic styles for a Twilio video/appointment interface.
 */

/* === VARIABLES (Twilio-inspired Colors) === */
:root {
    --twilio-blue: #007bff; /* Primary action color */
    --twilio-red: #dc3545;  /* Danger/End call color */
    --twilio-gray: #4a5568; /* Text/Secondary color */
    --twilio-bg: #f7fafc;   /* Light background */
    --twilio-white: #ffffff;
}

/* === BASE STYLES === */
.twilio-container {
    font-family: Arial, sans-serif;
    background-color: var(--twilio-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    margin: 20px 0;
}

/* === VIDEO INTERFACE STYLES === */
.twilio-video-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.twilio-local-video,
.twilio-remote-video {
    width: 100%;
    min-height: 250px;
    background-color: #000;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

/* Ensure the video element inside is responsive */
.twilio-local-video video,
.twilio-remote-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Smaller picture-in-picture style for local video */
.twilio-local-video.pip {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 120px;
    height: 90px;
    z-index: 10;
    border: 2px solid var(--twilio-white);
}

/* === CONTROLS & BUTTONS === */
.twilio-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.twilio-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--twilio-white);
}

/* Primary Button (e.g., Join Call) */
.twilio-btn-primary {
    background-color: var(--twilio-blue);
}
.twilio-btn-primary:hover {
    background-color: #0056b3;
}

/* Danger Button (e.g., End Call) */
.twilio-btn-danger {
    background-color: var(--twilio-red);
}
.twilio-btn-danger:hover {
    background-color: #c82333;
}

/* Secondary/Toggle Button (e.g., Mute) */
.twilio-btn-secondary {
    background-color: var(--twilio-gray);
}
.twilio-btn-secondary:hover {
    background-color: #384252;
}

.twilio-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}