/* CLS (Cumulative Layout Shift) Fixes */

/* Prevent layout shift from navbar */
.navbar {
    min-height: 56px; /* Fixed height to prevent shift */
}

/* Prevent shift from user menu */
.navbar .dropdown-menu {
    position: absolute !important;
}

/* Fix card layout shifts */
.card {
    min-height: 100px; /* Minimum height to prevent collapse */
}

.card-header-area {
    min-height: 40px;
}

/* Price table layout stability */
.price-table {
    min-height: 60px;
}

.price-row {
    min-height: 48px;
}

/* Font loading optimization to prevent text shift */
.font-loading body {
    opacity: 0;
}

body {
    font-display: swap;
    transition: opacity 0.1s;
}

/* Image dimensions to prevent shift */
img:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* Skeleton loaders with fixed dimensions */
.skeleton-box {
    min-height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* Ad placement stability */
.ad-placement {
    min-height: 250px; /* Standard ad height */
    overflow: hidden;
}

.ad-placement-mobile {
    min-height: 100px;
}

/* Table stability */
.table-responsive {
    min-height: 200px;
    overflow-x: auto;
}

/* Button and input field stability */
.btn {
    min-height: 38px;
}

.form-control {
    min-height: 38px;
}

/* Dropdown stability */
.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    vertical-align: middle;
}

/* Hero section stability */
.hero-section {
    min-height: 300px;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 200px;
    }
}

/* Stats cards stability */
.stat-card {
    min-height: 80px;
}

/* Loading states */
[data-loading="true"] {
    pointer-events: none;
    opacity: 0.6;
}