/**
 * Fallback styles for shadcn components
 * Ensures components work even if Tailwind doesn't load
 */

/* Component container */
.mbs-booking-form {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ensure proper rendering */
#mbs-booking-form-react {
    min-height: 200px;
}

/* Loading state */
#mbs-booking-form-react:empty::before {
    content: 'Loading form...';
    display: block;
    padding: 20px;
    text-align: center;
    color: #666;
}

/* Error state */
.mbs-form-error {
    background: #fee;
    color: #c33;
    padding: 12px;
    border-radius: 6px;
    margin: 10px 0;
}

/* Ensure components are visible and properly styled */
#mbs-booking-form-react button,
#mbs-booking-form-react input,
#mbs-booking-form-react select {
    box-sizing: border-box;
    font-family: inherit;
    color: #111827 !important; /* Force black text */
}

/* Ensure text in buttons is visible */
#mbs-booking-form-react button span {
    color: #111827 !important;
}

/* Ensure selected values are visible */
#mbs-booking-form-react button[type="button"] {
    color: #111827 !important;
}

/* Fix for any transparent text */
#mbs-booking-form-react * {
    color: inherit;
}

#mbs-booking-form-react input,
#mbs-booking-form-react select,
#mbs-booking-form-react textarea {
    color: #111827 !important;
}

/* Prevent any blue rectangle issues */
#mbs-booking-form-react [style*="background"] {
    /* Let inline styles take precedence */
}

/* Ensure buttons look like buttons */
#mbs-booking-form-react button {
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Fix for SVG icons */
#mbs-booking-form-react svg {
    display: inline-block;
    vertical-align: middle;
}