/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/common/styles/lazy-load.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * BAIS Lazy Load Styles
 * 
 * CSS for lazy loading effects and animations
 */
.coca-bais-container:not(.coca-image-compare-container) {
  position: relative;
}
.coca-bais-container:not(.coca-image-compare-container) img {
  max-width: 100%;
  height: auto;
}
.coca-bais-container:not(.coca-image-compare-container) img:first-child {
  display: block !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}
.coca-bais-container:not(.coca-image-compare-container) img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.coca-bais-container.coca-bais-loading {
  position: relative;
}
.coca-bais-container.coca-bais-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(246, 247, 248, 0.9);
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity 300ms ease-out;
}
.coca-bais-container:not(.coca-bais-loading)::before, .coca-bais-container:not(.coca-bais-loading)::after {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.coca-bais-lazy {
  transition: opacity 300ms ease-in-out;
}
.coca-bais-lazy.coca-bais-lazy-loaded {
  opacity: 1 !important;
}
.coca-bais-lazy:not(.coca-bais-lazy-loading):not(.coca-bais-lazy-loaded):not(.coca-bais-lazy-error) {
  opacity: 1 !important;
}
.coca-bais-lazy.coca-bais-lazy-error {
  opacity: 0.5;
  filter: grayscale(100%);
  position: relative;
}
.coca-bais-lazy.coca-bais-lazy-error::after {
  content: "⚠";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #e74c3c;
  background: rgba(255, 255, 255, 0.9);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.coca-bais-shimmer {
  position: relative;
  background: linear-gradient(90deg, #f6f7f8 0%, #eee 50%, #f6f7f8 100%);
  background-size: 200% 100%;
  animation: bais-shimmer 1.5s ease-in-out infinite;
}
.coca-bais-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(246, 247, 248, 0.8) 0%, rgba(238, 238, 238, 0.8) 50%, rgba(246, 247, 248, 0.8) 100%);
  background-size: 200% 100%;
  animation: bais-shimmer 1.5s ease-in-out infinite;
  z-index: 2;
  display: block;
}

.coca-bais-lazy-fade-slow {
  transition-duration: 600ms;
}

.coca-bais-lazy-fade-fast {
  transition-duration: 150ms;
}

.coca-bais-lazy-blur {
  filter: blur(5px);
  transition: filter 300ms ease-out, opacity 300ms ease-out;
}
.coca-bais-lazy-blur.coca-bais-lazy-loaded {
  filter: blur(0);
}

.coca-bais-lazy-scale {
  transform: scale(1.05);
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.coca-bais-lazy-scale.coca-bais-lazy-loaded {
  transform: scale(1);
}

.coca-bais-progressive-loading .coca-bais-lazy-after {
  opacity: 0.3;
}
.coca-bais-progressive-loading .coca-bais-lazy-after::before {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 5;
}

@media (max-width: 768px) {
  .coca-bais-container.coca-bais-loading::after {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
  }
  .coca-bais-lazy {
    transition-duration: 200ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .coca-bais-lazy,
  .coca-bais-container.coca-bais-loading::before,
  .coca-bais-container.coca-bais-loading::after,
  .coca-bais-shimmer {
    transition: none;
    animation: none;
  }
  .coca-bais-lazy-blur {
    filter: none;
  }
  .coca-bais-lazy-scale {
    transform: none;
  }
}
@media (prefers-contrast: high) {
  .coca-bais-container.coca-bais-loading::before {
    background: rgba(255, 255, 255, 0.95);
  }
  .coca-bais-lazy-error::after {
    background: white;
    border: 2px solid #e74c3c;
  }
}
@keyframes bais-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bais-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes bais-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bais-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.coca-bais-pulse {
  animation: bais-pulse 2s ease-in-out infinite;
}

.coca-bais-skeleton {
  background: #f6f7f8;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.coca-bais-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: bais-skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes bais-skeleton-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media print {
  .coca-bais-lazy,
  .coca-bais-shimmer,
  .coca-bais-container.coca-bais-loading::before,
  .coca-bais-container.coca-bais-loading::after {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}
.coca-bais-debug .coca-bais-lazy {
  border: 2px solid;
}
.coca-bais-debug .coca-bais-lazy.coca-bais-lazy-loading {
  border-color: orange;
}
.coca-bais-debug .coca-bais-lazy.coca-bais-lazy-loaded {
  border-color: green;
}
.coca-bais-debug .coca-bais-lazy.coca-bais-lazy-error {
  border-color: red;
}

/* Blur effect for before iframe */
/* Color effect for before iframe */
.coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-color {
  background-color: #f0f0f0;
}

/* Similar for after iframe */
.coca-bais-lazy-loading.coca-bais-lazy-after.coca-bais-placeholder-color {
  background-color: #f0f0f0;
}

/* Skeleton effect for iframes */
.coca-video-compare-wrapper .coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-skeleton {
  background: #f0f0f0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M19 9V15C19 17.2091 17.2091 19 15 19H9C6.79086 19 5 17.2091 5 15V9C5 6.79086 6.79086 5 9 5H15C17.2091 5 19 6.79086 19 9Z%27 stroke=%27%23c0c0c0%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M11.4 12.117L13.3 13.549C13.4244 13.6373 13.4983 13.7804 13.4983 13.933C13.4983 14.0855 13.4244 14.2286 13.3 14.317L11.4 15.883C11.2396 16.0081 11.0239 16.0363 10.8367 15.9564C10.6496 15.8766 10.5206 15.7014 10.5 15.499V12.499C10.5213 12.2969 10.6505 12.1223 10.8375 12.043C11.0245 11.9636 11.2399 11.9919 11.4 12.117V12.117Z%27 stroke=%27%23c0c0c0%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M19 9.75C19.4142 9.75 19.75 9.41421 19.75 9C19.75 8.58579 19.4142 8.25 19 8.25V9.75ZM12 8.25C11.5858 8.25 11.25 8.58579 11.25 9C11.25 9.41421 11.5858 9.75 12 9.75V8.25ZM5 8.25C4.58579 8.25 4.25 8.58579 4.25 9C4.25 9.41421 4.58579 9.75 5 9.75V8.25ZM12 9.75C12.4142 9.75 12.75 9.41421 12.75 9C12.75 8.58579 12.4142 8.25 12 8.25V9.75ZM11.25 9C11.25 9.41421 11.5858 9.75 12 9.75C12.4142 9.75 12.75 9.41421 12.75 9H11.25ZM12.75 5C12.75 4.58579 12.4142 4.25 12 4.25C11.5858 4.25 11.25 4.58579 11.25 5H12.75ZM19 8.25H12V9.75H19V8.25ZM5 9.75H12V8.25H5V9.75ZM12.75 9V5H11.25V9H12.75Z%27 fill=%27%23c0c0c0%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px 100px;
}
.coca-video-compare-wrapper .coca-bais-lazy-loading.coca-bais-lazy-after.coca-bais-placeholder-skeleton {
  background: #f0f0f0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M19 9V15C19 17.2091 17.2091 19 15 19H9C6.79086 19 5 17.2091 5 15V9C5 6.79086 6.79086 5 9 5H15C17.2091 5 19 6.79086 19 9Z%27 stroke=%27%23c0c0c0%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M11.4 12.117L13.3 13.549C13.4244 13.6373 13.4983 13.7804 13.4983 13.933C13.4983 14.0855 13.4244 14.2286 13.3 14.317L11.4 15.883C11.2396 16.0081 11.0239 16.0363 10.8367 15.9564C10.6496 15.8766 10.5206 15.7014 10.5 15.499V12.499C10.5213 12.2969 10.6505 12.1223 10.8375 12.043C11.0245 11.9636 11.2399 11.9919 11.4 12.117V12.117Z%27 stroke=%27%23c0c0c0%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M19 9.75C19.4142 9.75 19.75 9.41421 19.75 9C19.75 8.58579 19.4142 8.25 19 8.25V9.75ZM12 8.25C11.5858 8.25 11.25 8.58579 11.25 9C11.25 9.41421 11.5858 9.75 12 9.75V8.25ZM5 8.25C4.58579 8.25 4.25 8.58579 4.25 9C4.25 9.41421 4.58579 9.75 5 9.75V8.25ZM12 9.75C12.4142 9.75 12.75 9.41421 12.75 9C12.75 8.58579 12.4142 8.25 12 8.25V9.75ZM11.25 9C11.25 9.41421 11.5858 9.75 12 9.75C12.4142 9.75 12.75 9.41421 12.75 9H11.25ZM12.75 5C12.75 4.58579 12.4142 4.25 12 4.25C11.5858 4.25 11.25 4.58579 11.25 5H12.75ZM19 8.25H12V9.75H19V8.25ZM5 9.75H12V8.25H5V9.75ZM12.75 9V5H11.25V9H12.75Z%27 fill=%27%23c0c0c0%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px 100px;
}

/* Triple slider background skeleton - show on parent container when images are lazy loading */
.coca-bais-triple-container {
  position: relative;
}
.coca-bais-triple-container:has(.coca-bais-lazy-loading.coca-bais-placeholder-skeleton)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #EFF1F3;
  background-image: url("data:image/svg+xml,%3Csvg fill=%27none%27 viewBox=%270 0 120 120%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect fill=%27%23EFF1F3%27 height=%27120%27 width=%27120%27 /%3E%3Cpath clip-rule=%27evenodd%27 d=%27M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z%27 fill=%27%23687787%27 fill-rule=%27evenodd%27 /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 120px 120px;
  z-index: 0;
  pointer-events: none;
}
.coca-bais-triple-container:has(.coca-bais-lazy-loading.coca-bais-placeholder-color)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f0f0f0;
  z-index: 0;
  pointer-events: none;
}
.coca-bais-triple-container.coca-bais-loading-skeleton::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #EFF1F3;
  background-image: url("data:image/svg+xml,%3Csvg fill=%27none%27 viewBox=%270 0 120 120%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect fill=%27%23EFF1F3%27 height=%27120%27 width=%27120%27 /%3E%3Cpath clip-rule=%27evenodd%27 d=%27M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z%27 fill=%27%23687787%27 fill-rule=%27evenodd%27 /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 120px 120px;
  z-index: 0;
  pointer-events: none;
}
.coca-bais-triple-container:not(:has(.coca-bais-lazy-loading)):not(.coca-bais-loading-skeleton)::before {
  display: none;
}

/* Horizontal slider positioning - adjust for split view */
.coca-image-compare-horizontal .coca-video-compare-wrapper .coca-bais-lazy-loading.coca-bais-lazy-before.coca-bais-placeholder-skeleton {
  background-position: 25% center; /* Position in left area */
}
.coca-image-compare-horizontal .coca-video-compare-wrapper .coca-bais-lazy-loading.coca-bais-lazy-after.coca-bais-placeholder-skeleton {
  background-position: 75% center; /* Position in right area */
}

/*# sourceMappingURL=lazy-load.css.map*/