/* 
 * PLAZA BANNER - ISOLATED STYLES
 * These styles are designed to be embedded in external sites without affecting their styles.
 * All styles are either CSS variables (only inherited, not overriding) or scoped to .react-container
 */

/* CSS Variables - PlazaWeb Styling Guide Implementation */
:root {
    /* Primary Colors */
    --plaza-primary: #0052CC;
    --plaza-primary-50: #E6F0FF;
    --plaza-primary-100: #CCE0FF;
    --plaza-primary-200: #99C2FF;
    --plaza-primary-300: #66A3FF;
    --plaza-primary-400: #3385FF;
    --plaza-primary-500: #0066FF;
    --plaza-primary-600: #0052CC;
    --plaza-primary-700: #003D99;
    --plaza-primary-800: #002966;
    --plaza-primary-900: #001433;
    
    /* Secondary Colors */
    --plaza-secondary: #00D084;
    --plaza-secondary-50: #E6FFF5;
    --plaza-secondary-100: #CCFFEB;
    --plaza-secondary-200: #99FFD7;
    --plaza-secondary-300: #66FFC3;
    --plaza-secondary-400: #33FFAF;
    --plaza-secondary-500: #00FF9B;
    --plaza-secondary-600: #00D084;
    --plaza-secondary-700: #00A166;
    --plaza-secondary-800: #007249;
    --plaza-secondary-900: #00432B;
    
    /* Gray Scale */
    --plaza-gray-50: #F9FAFB;
    --plaza-gray-100: #F3F4F6;
    --plaza-gray-200: #E5E7EB;
    --plaza-gray-300: #D1D5DB;
    --plaza-gray-400: #9CA3AF;
    --plaza-gray-500: #6B7280;
    --plaza-gray-600: #4B5563;
    --plaza-gray-700: #374151;
    --plaza-gray-800: #1F2937;
    --plaza-gray-900: #111827;
    
    /* Glass Effects */
    --plaza-glass-light: rgb(26 56 99 / 80%);
    --plaza-glass-dark: rgb(26 56 99 / 57%);
    --plaza-glass-subtle: rgb(26 56 99 / 30%);
    --plaza-glass-border: rgb(26 56 99 / 40%);
    --plaza-glass-border-subtle: rgb(26 56 99 / 20%);
    
    /* UI Glass Variables */
    --glass-bg-ui: rgb(31 31 31 / 57%);
    --glass-border-ui: rgb(26 56 99 / 40%);
    --text-color-ui: var(--plaza-gray-50);
    --primary-color-ui: var(--plaza-primary);
    --secondary-color-ui: var(--plaza-secondary);
    --shadow-color-ui: rgba(0, 0, 0, 0.3);
    
    /* Typography */
    --plaza-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --plaza-font-features: 'cv11', 'ss01';
    --plaza-font-variation: 'opsz' 32;
    
    /* Legacy compatibility */
    --plaza-primary-color: var(--plaza-primary);
    --plaza-secondary-color: var(--plaza-secondary);
    --plaza-text-color: var(--plaza-gray-900);
    --plaza-background-color: var(--plaza-gray-50);
    --plaza-border-color: var(--plaza-gray-200);
    --plaza-color-text: var(--plaza-gray-900);
    --plaza-color-error: #E74C3C;
    
    /* Banner Variables */
    --color-text: var(--plaza-gray-50);
    --font-family-text: var(--plaza-font-family);
    --border-radius-full: 9999px;
    --border-radius-large: 16px;
    --element-padding: 12px 18px;
    --font-size-base: 1rem;
    --font-size-small: 0.9rem;
    --font-size-large: 1.2rem;
    
    /* UI-specific variables */
    --plaza-font-family-text: var(--plaza-font-family);
    --plaza-font-family-headlines: var(--plaza-font-family);
    --plaza-border-radius-full: 9999px;
    --plaza-border-radius-large: 24px;
    --plaza-element-padding: 12px 18px;
    --plaza-font-size-base: 1rem;
    --plaza-font-size-small: 0.9rem;
    --plaza-font-size-large: 1.2rem;
}

/* 
 * SCOPED STYLES - All styles below are scoped to .react-container 
 * This ensures they only affect content within the Plaza Banner shadow DOM
 */

.react-container {
    margin: 0;
    padding: 0;
    font-family: var(--plaza-font-family);
    font-feature-settings: var(--plaza-font-features);
    font-variation-settings: var(--plaza-font-variation);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--plaza-gray-900);
    background-color: var(--plaza-gray-50);
    box-sizing: border-box;
    /* Reset any inherited styles */
    line-height: 1.6;
    text-align: left;
    font-size: var(--plaza-font-size-base);
}

.react-container *,
.react-container *::before,
.react-container *::after {
    box-sizing: border-box;
}

.react-container h1, 
.react-container h2, 
.react-container h3, 
.react-container h4, 
.react-container h5, 
.react-container h6 {
    font-family: var(--plaza-font-family-headlines, 'Playfair Display', serif);
    margin: 0;
    padding: 0;
    font-weight: normal;
    line-height: 1.2;
}

.react-container a {
    text-decoration: none;
    color: var(--plaza-secondary-color);
    background-color: transparent;
}

.react-container button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.react-container input,
.react-container textarea,
.react-container select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Banner-specific utility classes - scoped to react-container */
.react-container .plaza-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.react-container .plaza-text-center {
    text-align: center;
}

.react-container .plaza-text-left {
    text-align: left;
}

.react-container .plaza-text-right {
    text-align: right;
}

/* Spacing utilities */
.react-container .plaza-mt-1 { margin-top: 1rem; }
.react-container .plaza-mt-2 { margin-top: 2rem; }
.react-container .plaza-mt-3 { margin-top: 3rem; }
.react-container .plaza-mb-1 { margin-bottom: 1rem; }
.react-container .plaza-mb-2 { margin-bottom: 2rem; }
.react-container .plaza-mb-3 { margin-bottom: 3rem; }
.react-container .plaza-ml-1 { margin-left: 1rem; }
.react-container .plaza-ml-2 { margin-left: 2rem; }
.react-container .plaza-ml-3 { margin-left: 3rem; }
.react-container .plaza-mr-1 { margin-right: 1rem; }
.react-container .plaza-mr-2 { margin-right: 2rem; }
.react-container .plaza-mr-3 { margin-right: 3rem; }

/* Padding utilities */
.react-container .plaza-p-1 { padding: 1rem; }
.react-container .plaza-p-2 { padding: 2rem; }
.react-container .plaza-p-3 { padding: 3rem; }
.react-container .plaza-pt-1 { padding-top: 1rem; }
.react-container .plaza-pt-2 { padding-top: 2rem; }
.react-container .plaza-pt-3 { padding-top: 3rem; }
.react-container .plaza-pb-1 { padding-bottom: 1rem; }
.react-container .plaza-pb-2 { padding-bottom: 2rem; }
.react-container .plaza-pb-3 { padding-bottom: 3rem; }

/* 
 * SDK ELEMENT HIDING - Hide specific SDK overlay elements
 * These elements are added by the SDK and need to be hidden from view
 */

/* Hide SDK overlay elements by ID */
#microphoneOverlay,
#micIconUnmuted,
#connectOverlay,
#infoOverlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide SDK elements by class */
.love-letters-box-root {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Connection element - keep visible but can be styled if needed */