/* 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 */
img[src$=".svg"],
img[src*=".svg"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Default, override with specific dimensions */
}

/* Specific known images with dimensions */
img[src*="contact-us.svg"] {
    aspect-ratio: 1 / 1;
    max-width: 400px;
}

img[src*="SMS-API-3.svg"] {
    aspect-ratio: 4 / 3;
    max-width: 350px;
}

/* Common SVG images - default aspect ratios */
img[src$=".svg"]:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
}

/* Hero images and banners */
.hero-image img,
.banner-image img,
.slider img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* Feature icons and illustrations */
.feature-icon img,
.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 */
iframe[src*="google.com/maps/embed"] {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    min-height: 300px;
}

/* Responsive iframe wrapper */
.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    height: 0;
    overflow: hidden;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   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,
.carousel {
    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 */
.hero-image,
.slider-bg-media {
    min-height: 300px;
    contain: layout style;
}

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

@media (max-width: 768px) {
    iframe[src*="google.com/maps/embed"] {
        aspect-ratio: 16 / 9;
        min-height: 250px;
    }
    
    .swiper,
    .carousel {
        min-height: 300px;
    }
    
    .hero-image,
    .slider-bg-media {
        min-height: 200px;
    }
}

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

/* Skeleton/placeholder for lazy-loaded content */
.lazy-load-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

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

/* Aspect ratio utilities */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

/* Contain layout utilities */
.contain-layout {
    contain: layout style;
}

.contain-paint {
    contain: layout style paint;
}

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

/* Reserve space for Vue components and dynamic forms */
#forms,
[data-vue-component],
request-demo-form,
request-callback-form,
register-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,
.popover {
    contain: layout style paint;
}

/* Prevent shift from navigation menus */
.navbar-nav,
.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 */
.carousel-item {
    min-height: 400px;
    contain: layout style;
}

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

/* Prevent shift from lazy-loaded content */
[data-lazy],
.lazy-load {
    min-height: 200px;
    contain: layout style;
}

/* 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 */
.social-embed,
.oembed {
    min-height: 300px;
    contain: layout style;
}

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

/* Prevent shift from loading skeletons */
.skeleton,
.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 100px;
}

/* Reserve space for empty states */
.empty-state,
.no-results {
    min-height: 200px;
    contain: layout style;
}