/* Performance Optimizations for IBG Property Website */
/* Critical CSS for above-the-fold content */

/* Critical layout styles */
.container-fluid, .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* Critical navigation styles */
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

/* Critical carousel styles */
.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-inner > .item {
    position: relative;
    display: none;
    transition: 0.6s ease-in-out left;
}

.carousel-inner > .active {
    display: block;
}

.carousel-inner > .item > img {
    line-height: 1;
    width: 100%;
    height: auto;
}

/* Critical button styles */
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
}

.btn-yellow-neg {
    color: #000;
    background-color: #f4c000;
    border-color: #f4c000;
}

/* Critical responsive utilities */
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* Lazy loading placeholder styles */
.b-lazy {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

.b-lazy.b-loaded {
    opacity: 1;
}

/* Ensure first carousel slide is always visible immediately */
.carousel-inner .item.active img {
    opacity: 1 !important;
}

/* Override lazy loading for first carousel slide */
.carousel-inner .item.active .b-lazy {
    opacity: 1 !important;
}

/* Loading state for images */
.is-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.is-loaded {
    animation: none;
    background: none;
}

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

/* Critical accessibility improvements */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #f4c000;
    color: #000;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    font-weight: bold;
    border: 2px solid #000;
}

.skip-link:focus {
    top: 6px;
}

/* Performance: Reduce paint complexity */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Optimize font loading */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/fonts/glyphicons-halflings-regular.woff2') format('woff2');
    font-display: swap;
}

/* Critical form styles */
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Optimize animations for performance */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* GPU acceleration for smooth animations */
.carousel-inner > .item {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize carousel transitions */
.carousel-inner > .next,
.carousel-inner > .prev {
    transform: translate3d(100%, 0, 0);
}

.carousel-inner > .prev {
    transform: translate3d(-100%, 0, 0);
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
    transform: translate3d(0, 0, 0);
}

/* Critical grid system */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Mobile-first responsive grid */
.col-xs-1 { width: 8.33333333%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }

@media (min-width: 768px) {
    .col-sm-1 { width: 8.33333333%; }
    .col-sm-2 { width: 16.66666667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.33333333%; }
    .col-sm-5 { width: 41.66666667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.33333333%; }
    .col-sm-8 { width: 66.66666667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-12 { width: 100%; }
}

@media (min-width: 992px) {
    .col-md-1 { width: 8.33333333%; }
    .col-md-2 { width: 16.66666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33333333%; }
    .col-md-5 { width: 41.66666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33333333%; }
    .col-md-8 { width: 66.66666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
    .col-lg-1 { width: 8.33333333%; }
    .col-lg-2 { width: 16.66666667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.33333333%; }
    .col-lg-5 { width: 41.66666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.33333333%; }
    .col-lg-8 { width: 66.66666667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-12 { width: 100%; }
}