/* CLS Prevention CSS - Critical for Core Web Vitals
 * This file prevents Cumulative Layout Shift (CLS) issues
 * by reserving space for images, iframes, and dynamic content
 */

/* ============================================
   IMAGE DIMENSIONS & ASPECT RATIO
   ============================================ */

/* Ensure all images have aspect-ratio to prevent layout shift */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Use aspect-ratio when width/height are provided */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
    height: auto;
}

/* Common image aspect ratios - add specific dimensions as needed */
img.img-fluid {
    width: 100%;
    height: auto;
}

/* SVG images - reserve space */

/* Specific known images with dimensions */

/* Common SVG images - default aspect ratios */

/* Hero images and banners */

.slider img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* Feature icons and illustrations */
.feature-icon img {
    aspect-ratio: 1 / 1;
    max-width: 64px;
    max-height: 64px;
}

/* Card images */
.card img,
.card-img-top {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Picture element optimization */
picture {
    display: block;
    width: 100%;
    line-height: 0;
}

picture img {
    width: 100%;
    height: auto;
}

/* ============================================
   IFRAME DIMENSIONS & ASPECT RATIO
   ============================================ */

/* Google Maps iframe - prevent layout shift */
iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Google Maps embed - maintain aspect ratio */

/* Responsive iframe wrapper */

/* ============================================
   DYNAMIC CONTENT SPACE RESERVATION
   ============================================ */

/* Reserve space for forms that load dynamically */
#forms {
    min-height: 200px;
    contain: layout style;
}

/* Reserve space for modals to prevent shift when opened */
.modal {
    position: fixed;
    contain: layout style paint;
}

/* Reserve space for dropdowns */
.dropdown-menu {
    position: absolute;
    contain: layout style;
    min-width: 200px;
}

/* Reserve space for buttons */
.btn {
    min-height: 2.5rem;
    contain: layout style;
    white-space: nowrap;
}

/* Reserve space for cards and containers */
.card {
    contain: layout style;
}

.card-body {
    min-height: 100px;
}

/* Reserve space for navigation */
.navbar {
    min-height: 70px;
    contain: layout style;
}

.top-bar {
    min-height: 2.5rem;
    contain: layout style;
}

/* Minimize top-bar height on mobile devices */
@media (max-width: 991.98px) {
    .top-bar {
        min-height: 1.25rem !important;
        padding: 0.15rem 0 !important;
    }
}

@media (max-width: 576px) {
    .top-bar {
        min-height: 1rem !important;
        padding: 0.1rem 0 !important;
    }
}

@media (max-width: 400px) {
    .top-bar {
        min-height: 0.875rem !important;
        padding: 0.08rem 0 !important;
    }
}

/* ============================================
   FONT LOADING PREVENTION
   ============================================ */

/* Prevent layout shift during font swap */
h1, h2, h3, h4, h5, h6 {
    font-display: swap;
    line-height: 1.2;
}

p, span, div, a {
    font-display: swap;
}

/* Icon fonts - reserve space */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    display: inline-block;
    width: 1em;
    min-width: 1em;
    text-align: center;
    aspect-ratio: 1/1;
}

/* ============================================
   COMPONENT-SPECIFIC FIXES
   ============================================ */

/* Slider/carousel - reserve space */
.swiper {
    min-height: 400px;
    contain: layout style;
}

/* Tables - prevent shift */
.table-responsive {
    contain: layout style;
}

/* Accordion - prevent shift when expanding */
.accordion-item {
    contain: layout style;
}

.accordion-body {
    min-height: 50px;
}

/* Tabs - prevent shift */
.tab-content {
    min-height: 200px;
    contain: layout style;
}

.tab-pane {
    contain: layout style;
}

/* Pricing cards - reserve space */
.pricing-plan-card,
.pricing-tab-card {
    min-height: 150px;
    contain: layout style;
}

/* Feature cards - reserve space */
.modern-feature-card,
.modern-step-card {
    min-height: 200px;
    contain: layout style;
}

/* Hero sections - reserve space */

.slider-bg-media {
    min-height: 300px;
    contain: layout style;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    
    .swiper {
        min-height: 300px;
    }
    
    
    .slider-bg-media {
        min-height: 200px;
    }
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Skeleton/placeholder for lazy-loaded content */

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Aspect ratio utilities */

/* Contain layout utilities */

/* ============================================
   ADDITIONAL CLS PREVENTION RULES
   ============================================ */

/* Reserve space for Vue components and dynamic forms */
#forms,
request-demo-form,
request-callback-form {
    min-height: 200px;
    contain: layout style;
}

/* Prevent shift from loading states */
.spinner-border,
.btn-loading {
    min-width: 1rem;
    min-height: 1rem;
    contain: layout style;
}

/* Reserve space for accordions and collapsibles */
.accordion-collapse {
    contain: layout style;
}

/* Prevent shift from badges and labels */
.badge,
.label {
    display: inline-block;
    min-width: 1.5rem;
    contain: layout style;
}

/* Reserve space for tooltips and popovers */
.tooltip {
    contain: layout style paint;
}

/* Prevent shift from navigation menus */

.dropdown-menu {
    contain: layout style;
}

/* Reserve space for tables */
.table {
    contain: layout style;
}

.table td,
.table th {
    min-height: 2.5rem;
}

/* Prevent shift from modals */
.modal-dialog {
    contain: layout style paint;
}

.modal-content {
    min-height: 200px;
}

/* Reserve space for carousels and sliders */

.swiper-slide {
    min-height: 300px;
    contain: layout style;
}

/* Prevent shift from lazy-loaded content */

/* Reserve space for embedded content */
embed,
object,
video {
    display: block;
    width: 100%;
    height: auto;
}

video {
    aspect-ratio: 16 / 9;
}

/* Prevent shift from ads and third-party widgets */
iframe[src*="google"],
iframe[src*="facebook"],
iframe[src*="twitter"],
iframe[src*="linkedin"] {
    aspect-ratio: 16 / 9;
    min-height: 200px;
}

/* Reserve space for charts and graphs */
canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Prevent shift from social media embeds */

/* Reserve space for code blocks */
pre,
code {
    contain: layout style;
}

/* Prevent shift from loading skeletons */

/* Reserve space for empty states */