/* Utility classes to prevent CSP violations from inline styles */

/* Display utilities */
.display-none { display: none !important; }
.display-block { display: block !important; }
.display-inline { display: inline !important; }
.display-inline-block { display: inline-block !important; }
.display-flex { display: flex !important; }
.display-grid { display: grid !important; }

/* Visibility utilities */
.visibility-hidden { visibility: hidden !important; }
.visibility-visible { visibility: visible !important; }

/* Overflow utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* Opacity utilities */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Pointer events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* Transform utilities */
.transform-none { transform: none !important; }
.transform-scale-0 { transform: scale(0) !important; }
.transform-scale-95 { transform: scale(0.95) !important; }
.transform-scale-100 { transform: scale(1) !important; }
.transform-scale-105 { transform: scale(1.05) !important; }

/* Position utilities */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Z-index utilities */
.z-index-0 { z-index: 0 !important; }
.z-index-10 { z-index: 10 !important; }
.z-index-20 { z-index: 20 !important; }
.z-index-30 { z-index: 30 !important; }
.z-index-40 { z-index: 40 !important; }
.z-index-50 { z-index: 50 !important; }
.z-index-60 { z-index: 60 !important; }
.z-index-70 { z-index: 70 !important; }
.z-index-80 { z-index: 80 !important; }
.z-index-90 { z-index: 90 !important; }
.z-index-100 { z-index: 100 !important; }

/* Width utilities */
.width-auto { width: auto !important; }
.width-full { width: 100% !important; }
.width-50 { width: 50% !important; }
.width-25 { width: 25% !important; }

/* Height utilities */
.height-auto { height: auto !important; }
.height-full { height: 100% !important; }
.height-50 { height: 50% !important; }

/* Background color utilities - matching site theme */
.bg-transparent { background-color: transparent !important; }
.bg-dark-primary { background-color: #02111B !important; }
.bg-dark-secondary { background-color: #041C2C !important; }
.bg-accent { background-color: #00A7E1 !important; }
.bg-white { background-color: white !important; }
.bg-black { background-color: black !important; }

/* Color utilities */
.text-white { color: white !important; }
.text-accent { color: #00A7E1 !important; }
.text-light { color: rgba(255, 255, 255, 0.9) !important; }
.text-gray { color: #6B7280 !important; }
.text-dark { color: #111827 !important; }

/* Border utilities */
.border-none { border: none !important; }
.border-accent { border: 1px solid #00A7E1 !important; }
.border-gray { border: 1px solid #e5e7eb !important; }

/* Modal and overlay utilities */
.modal-overlay-show {
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-overlay-hide {
    opacity: 0 !important;
    visibility: hidden !important;
}

.modal-scale-in {
    transform: scale(1) translateY(0) !important;
}

.modal-scale-out {
    transform: scale(0.95) translateY(20px) !important;
}

/* Chat consent specific utilities */
.chat-consent-show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.chat-consent-hide {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Chat widget utilities */
.chat-widget-open {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

.chat-widget-closed {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    pointer-events: none !important;
}

.chat-toggle-hidden {
    display: none !important;
}

/* Body scroll lock */
.body-scroll-lock {
    overflow: hidden !important;
}

/* Element visibility for toggles */
.element-show {
    display: block !important;
}

.element-hide {
    display: none !important;
}

.element-flex-show {
    display: flex !important;
}

/* Additional common utilities based on the grep results */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* Flexbox utilities */
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }
.align-center { align-items: center !important; }
.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }

/* Text alignment */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Margins */
.margin-0 { margin: 0 !important; }
.margin-auto { margin: auto !important; }

/* Padding */
.padding-0 { padding: 0 !important; }

/* Box shadow utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; }
.shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important; }

/* Transition utilities */
.transition-all { transition: all 0.3s ease !important; }
.transition-opacity { transition: opacity 0.3s ease !important; }
.transition-transform { transition: transform 0.3s ease !important; }

/* Animation utilities for smooth state changes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-10px); opacity: 0; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards !important;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out forwards !important;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out forwards !important;
}

.animate-slide-out {
    animation: slideOut 0.3s ease-out forwards !important;
}