/* === Premium Cards Universal CSS for Elementor Widget === */

/* Base card styles - responsive with max-width */
.premium-card {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 0;
  padding-bottom: 100%; /* Creates 1:1 square ratio */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  background: #0b0f12;
  isolation: isolate;
  margin: 0 auto;
}

/* Background containers */
.idle-bg, .hover-bg,
.blue-bg, .gold-bg, .red-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Initial states */
.idle-bg {
  opacity: 1;
  transition: opacity var(--hover-duration, 0.8s) var(--hover-easing, ease);
}

.hover-bg {
  opacity: 0;
  transition: opacity var(--hover-duration, 0.8s) var(--hover-easing, ease);
}

/* Hover states - background swap */
.premium-card:hover .idle-bg {
  opacity: 0;
}

.premium-card:hover .hover-bg {
  opacity: 1;
}

/* Background slides */
.idle-slide, .hover-slide,
.blue-slide, .gold-slide, .red-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: none;
  transition: opacity 0.5s ease;
}

/* Show first slide by default for idle state */
.idle-slide:first-child,
.idle-slide.active {
  opacity: 1;
}

/* Hover slides are hidden by default, shown on hover */
.hover-slide:first-child,
.hover-slide.active,
.premium-card:hover .hover-slide:nth-child(1) {
  opacity: 1;
}

/* Start slideshow animation on hover for hover slides */
.premium-card:hover .hover-slide {
  animation: cardFade var(--card-duration, 12s) linear infinite;
}

.premium-card:hover .hover-slide:nth-child(1) { animation-delay: 0s; }
.premium-card:hover .hover-slide:nth-child(2) { animation-delay: 4s; }
.premium-card:hover .hover-slide:nth-child(3) { animation-delay: 8s; }

/* Dark tint overlay */
.idle-tint, .hover-tint,
.blue-tint, .gold-tint, .red-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20,26,31,0.90);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--logo-duration, 0.6s) var(--hover-easing, ease);
}

/* Hide tint on hover */
.premium-card:hover .idle-tint,
.premium-card:hover .hover-tint {
  opacity: 0;
}

/* Logo positioning with variable transitions */
.blue-logo, .gold-logo, .red-logo {
  position: absolute;
  width: 200px;
  height: 230px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: opacity var(--logo-duration, 0.6s) var(--hover-easing, ease);
}

.blue-logo-svg, .gold-logo-svg, .red-logo-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* === BLUE CARD SPECIFIC === */

/* Blue logo gradient */
.blue-logo-fill path,
.blue-logo-fill rect {
  fill: url(#blueFillGrad);
  stroke: none;
}

/* Blue shine layers */
.blue-shine-layer {
  mix-blend-mode: overlay;
  opacity: 0.75;
}

/* Blue hover animations */
.premium-card-blue:hover .blue-logo { opacity: 0; }

/* === GOLD CARD SPECIFIC === */

/* Gold logo gradient */
.gold-logo-fill path,
.gold-logo-fill rect {
  fill: #d4af37;
  stroke: none;
}

/* Gold shine layers */
.gold-shine-layer {
  mix-blend-mode: overlay;
  opacity: 0.75;
}

/* Gold hover animations */
.premium-card:hover .gold-logo { opacity: 0; }

/* === RED CARD SPECIFIC === */

/* Red logo gradient */
.red-background path {
  fill: #BF301A;
  stroke: none;
}

.red-background rect {
  stroke: #ffffff;
  fill: none;
}

/* Red text styling */
.kct-text path {
  fill: #ffffff;
  stroke: none;
}

/* Red shine layers */
.red-shine-layer {
  mix-blend-mode: overlay;
  opacity: 0.75;
}

/* Red hover animations */
.premium-card-red:hover .red-logo { opacity: 0; }

/* === UNIVERSAL FADE ANIMATION === */
@keyframes cardFade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}

/* === NAVIGATION DOTS (UNIVERSAL) === */
.blue-dots, .gold-dots, .red-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.premium-card:hover .blue-dots,
.premium-card:hover .gold-dots,
.premium-card:hover .red-dots {
  opacity: 1;
}

.blue-dot, .gold-dot, .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blue-dot:hover, .gold-dot:hover, .red-dot:hover {
  background: rgba(255,255,255,0.8);
  transform: scale(1.2);
}

.blue-dot.blue-active, .gold-dot.gold-active, .red-dot.red-active,
.blue-dot.active, .gold-dot.active, .red-dot.active {
  background: rgba(255,255,255,1);
  transform: scale(1.3);
}

/* === NAVIGATION ARROWS (UNIVERSAL) === */
.blue-arrow, .gold-arrow, .red-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  color: #fff;
}

.blue-arrow-left, .gold-arrow-left, .red-arrow-left {
  left: 10px;
}

.blue-arrow-right, .gold-arrow-right, .red-arrow-right {
  right: 10px;
}

.blue-arrow:hover, .gold-arrow:hover, .red-arrow:hover {
  background: rgba(0,0,0,0.8);
  transform: translateY(-50%) scale(1.1);
}

.premium-card:hover .blue-arrow,
.premium-card:hover .gold-arrow,
.premium-card:hover .red-arrow {
  opacity: 1;
}

/* === ENHANCED HOVER EFFECTS === */

/* Smooth background transition for all card types */
.premium-card {
  transition: transform var(--hover-duration, 0.8s) var(--hover-easing, ease);
}

.premium-card:hover {
  transform: scale(1.02);
}

/* Enhanced shadow on hover */
.premium-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

/* Smooth logo fade with custom timing */
.blue-logo, .gold-logo, .red-logo {
  transition: opacity var(--logo-duration, 0.6s) var(--hover-easing, ease),
              transform var(--logo-duration, 0.6s) var(--hover-easing, ease);
}

.premium-card:hover .blue-logo,
.premium-card:hover .gold-logo,
.premium-card:hover .red-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  .premium-card {
    max-width: 250px;
  }

  .blue-logo, .gold-logo, .red-logo {
    width: 150px;
    height: 175px;
  }

  .blue-arrow, .gold-arrow, .red-arrow {
    width: 35px;
    height: 35px;
    opacity: 1; /* Always visible on mobile */
  }

  .blue-dots, .gold-dots, .red-dots {
    opacity: 1; /* Always visible on mobile */
    bottom: 15px;
    gap: 8px;
  }

  .blue-dot, .gold-dot, .red-dot {
    width: 7px;
    height: 7px;
  }

  .blue-arrow-left, .gold-arrow-left, .red-arrow-left {
    left: 8px;
  }

  .blue-arrow-right, .gold-arrow-right, .red-arrow-right {
    right: 8px;
  }

  /* Disable hover transitions on touch devices */
  .premium-card:hover {
    transform: none;
  }

  .premium-card:hover .blue-logo,
  .premium-card:hover .gold-logo,
  .premium-card:hover .red-logo {
    transform: translate(-50%, -50%);
  }

  /* Show idle state by default on mobile */
  .idle-bg {
    opacity: 1 !important;
  }

  .hover-bg {
    opacity: 0 !important;
  }

  /* Disable hover slideshow on mobile for performance */
  .premium-card:hover .hover-slide {
    animation: none;
  }

  /* Show first slide only on mobile */
  .hover-slide:not(:first-child) {
    opacity: 0 !important;
  }
  .hover-slide:first-child {
    opacity: 1 !important;
  }
}

@media (max-width: 480px) {
  .premium-card {
    max-width: 200px;
  }

  .blue-logo, .gold-logo, .red-logo {
    width: 120px;
    height: 140px;
  }
}

/* === ACCESSIBILITY ENHANCEMENTS === */

/* Focus states for keyboard navigation */
.blue-arrow:focus, .gold-arrow:focus, .red-arrow:focus,
.blue-dot:focus, .gold-dot:focus, .red-dot:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .idle-bg, .hover-bg,
  .blue-tint, .gold-tint, .red-tint,
  .blue-logo, .gold-logo, .red-logo {
    transition: none;
  }

  .premium-card:hover .hover-slide {
    animation: none;
  }

  .premium-card:hover {
    transform: none;
  }
}