/* 
 * 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 - These don't override external styles, only provide defaults for the banner */
:root {
    --plaza-primary-color: #394b44; /* Background */
    --plaza-secondary-color: #e9cd9a; /* Highlight, CTA, Decor */
    --plaza-text-color: #f7f1e4; /* Main Text */
    --plaza-glass-bg: rgba(57, 75, 68, 0.6); /* Dark green with transparency for glass effect */
    --plaza-glass-border: rgba(233, 205, 154, 0.2); /* Subtle border for glass elements */
    --plaza-light-color: rgba(247, 241, 228, 0.1); /* Lighter shade, can be adjusted */
    --plaza-dark-color: #2a3831; /* Darker shade of primary, for contrast */
    --plaza-shadow-color: rgba(0, 0, 0, 0.2); /* Subtle shadow */
    --plaza-accent-color: #e74c3c;
    --plaza-light-text: #fff;
    --plaza-background-color: #f5f5f5;
    --plaza-border-color: #ddd;
    --plaza-color-text: #f7f1e4;
    --plaza-color-text-rgb: 247, 241, 228; /* RGB version of --color-text */
    --plaza-color-error: #e74c3c;
    
    /* UI-specific variables for components */
    --plaza-font-family-text: 'Montserrat', sans-serif;
    --plaza-font-family-headlines: 'Montserrat', sans-serif;
    --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-text, 'Roboto', sans-serif);
    color: var(--plaza-text-color);
    background-color: var(--plaza-background-color);
    box-sizing: border-box;
    /* Reset any inherited styles */
    line-height: 1.4;
    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 h2 {
    font-weight: 500;
    letter-spacing: 4px;
}

.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 */