/**
 * Promo Banner Component Styles (Hero Cross-Promotion Hub)
 * iOS 3D Glassmorphic Widget with adaptive light & dark theme, floating 3D visuals, and gesture swipe.
 */
.hero-promo-section {
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.promo-banner-card {
  position: relative;
  background: var(--promo-tint, none), var(--bg-surface-elevated, #1a1e27);
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  padding: 14px 16px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  box-shadow: 0 4px 22px -2px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-glass, rgba(255, 255, 255, 0.06));
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  will-change: transform;
}

.promo-banner-card.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
}

.promo-banner-card.slide-in-right {
  animation: promoSlideInRight 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.promo-banner-card.slide-in-left {
  animation: promoSlideInLeft 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes promoSlideInRight {
  from {
    opacity: 0.3;
    transform: translateX(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes promoSlideInLeft {
  from {
    opacity: 0.3;
    transform: translateX(-28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Light Theme */
[data-theme="light"] .promo-banner-card {
  background: var(--promo-tint, none), #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.promo-banner-card:hover {
  border-color: var(--border-glass-hover, rgba(255, 255, 255, 0.22));
  box-shadow: 0 10px 28px -4px var(--promo-glow, rgba(244, 63, 94, 0.25)), 0 0 0 1px var(--border-glass-hover);
}

[data-theme="light"] .promo-banner-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
}

/* Ambient Radial Glow */
.promo-banner-glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--promo-glow, rgba(244, 63, 94, 0.25));
  filter: blur(55px);
  opacity: 0.38;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}

[data-theme="light"] .promo-banner-glow {
  opacity: 0.18;
}

/* Floating Blurred Background Elements */
.promo-floating-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.promo-floating-item {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.promo-floating-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.16));
}

[data-theme="light"] .promo-floating-item img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.10));
}

/* Dynamic, lively & chaotic floating animations */
@keyframes promoFloat1 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translate3d(6px, -11px, 0) rotate(calc(var(--rot, 0deg) + 5deg));
  }
}

@keyframes promoFloat2 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translate3d(-9px, -8px, 0) rotate(calc(var(--rot, 0deg) - 6deg));
  }
}

@keyframes promoFloat3 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
  25% {
    transform: translate3d(7px, -6px, 0) rotate(calc(var(--rot, 0deg) + 3deg));
  }
  50% {
    transform: translate3d(4px, 8px, 0) rotate(calc(var(--rot, 0deg) + 6deg));
  }
  75% {
    transform: translate3d(-5px, 4px, 0) rotate(calc(var(--rot, 0deg) - 4deg));
  }
}

@keyframes promoFloat4 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translate3d(-8px, 10px, 0) rotate(calc(var(--rot, 0deg) - 5deg));
  }
}

@keyframes promoFloat5 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translate3d(10px, -7px, 0) rotate(calc(var(--rot, 0deg) + 4deg));
  }
}

@keyframes promoFloat6 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translate3d(-6px, -12px, 0) scale(1.05) rotate(calc(var(--rot, 0deg) - 5deg));
  }
}

.promo-floating-item.anim-float-1 {
  animation: promoFloat1 6.2s ease-in-out infinite;
}

.promo-floating-item.anim-float-2 {
  animation: promoFloat2 5.4s ease-in-out infinite;
}

.promo-floating-item.anim-float-3 {
  animation: promoFloat3 7.8s ease-in-out infinite;
}

.promo-floating-item.anim-float-4 {
  animation: promoFloat4 5.8s ease-in-out infinite;
}

.promo-floating-item.anim-float-5 {
  animation: promoFloat5 6.6s ease-in-out infinite;
}

.promo-floating-item.anim-float-6 {
  animation: promoFloat6 4.9s ease-in-out infinite;
}

/* Body Container */
.promo-banner-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Topline: Badge + Navigation */
.promo-banner-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.promo-badge-tag {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

.promo-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.promo-badge-icon svg {
  display: block;
}

.promo-badge-tag.ui-pill--rose {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #fb7185;
}
[data-theme="light"] .promo-badge-tag.ui-pill--rose {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #e11d48;
}

.promo-badge-tag.ui-pill--amber {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
[data-theme="light"] .promo-badge-tag.ui-pill--amber {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #b45309;
}

.promo-badge-tag.ui-pill--cyan {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #22d3ee;
}
[data-theme="light"] .promo-badge-tag.ui-pill--cyan {
  background: #cffafe;
  border-color: #67e8f9;
  color: #0e7490;
}

.promo-badge-tag.ui-pill--blue {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
[data-theme="light"] .promo-badge-tag.ui-pill--blue {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.promo-badge-tag.ui-pill--purple {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}
[data-theme="light"] .promo-badge-tag.ui-pill--purple {
  background: #f3e8ff;
  border-color: #d8b4fe;
  color: #7e22ce;
}

/* Nav Controls & Animated Progress Dots */
.promo-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.promo-nav-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 25;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 3px 5px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .promo-nav-controls {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.promo-nav-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-primary, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 25;
  pointer-events: auto !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
}

[data-theme="light"] .promo-nav-arrow {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}

.promo-nav-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

[data-theme="light"] .promo-nav-arrow:hover {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.2);
  transform: scale(1.08);
}

.promo-nav-arrow:active {
  transform: scale(0.92);
}

.promo-dots-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 4px;
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

.promo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 25;
  pointer-events: auto !important;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.35s ease, background-color 0.25s ease;
  touch-action: manipulation;
}

.promo-dot::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -6px;
  right: -6px;
}

[data-theme="light"] .promo-dot {
  background: rgba(0, 0, 0, 0.2);
}

.promo-dot.active {
  width: 28px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .promo-dot.active {
  background: rgba(0, 0, 0, 0.12);
}

.promo-dot-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #ffffff;
  border-radius: inherit;
  transform-origin: left center;
  animation: promoDotProgress 6s linear forwards;
}

[data-theme="light"] .promo-dot-progress {
  background: #0f172a;
}

.promo-banner-card:hover .promo-dot-progress {
  animation-play-state: paused;
}

@keyframes promoDotProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Middle: Text + Floating 3D Artwork */
.promo-banner-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.promo-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 10;
}

.promo-banner-title {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
  line-height: 1.25;
}

[data-theme="light"] .promo-banner-title {
  color: #0f172a !important;
}

.promo-banner-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 450;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-theme="light"] .promo-banner-desc {
  color: #475569 !important;
}

/* Floating 3D Artwork without any box */
.promo-visual-wrap {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: none !important;
  z-index: 10;
}

.promo-3d-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.25);
  will-change: transform;
  pointer-events: none !important;
}

[data-theme="light"] .promo-3d-img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.14));
}

@media (hover: hover) and (pointer: fine) {
  .promo-banner-card:hover .promo-3d-img {
    transform: scale(1.08) rotate(3deg);
  }
}

/* Bottom: Full Width Button */
.promo-banner-bottom {
  width: 100%;
  display: flex;
  margin-top: 2px;
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

.promo-buttons-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: auto;
}

.promo-action-btn {
  width: auto;
  min-width: auto;
  height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--text-primary, #ffffff);
  color: var(--text-inverse, #090a0f);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none !important;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: all 0.2s ease;
  position: relative;
  z-index: 25;
  pointer-events: auto !important;
  touch-action: manipulation;
  flex: 0 0 auto;
}

.promo-action-btn.secondary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.promo-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.32);
}

[data-theme="light"] .promo-action-btn {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}

[data-theme="light"] .promo-action-btn.secondary {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .promo-action-btn.secondary:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}

.promo-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.promo-action-btn:active {
  transform: scale(0.97);
}

.promo-btn-mob-lbl {
  display: none;
}

/* Mobile & Small Screen Optimizations */
@media (max-width: 767px) {
  .promo-btn-desk-lbl {
    display: none !important;
  }
  .promo-btn-mob-lbl {
    display: inline !important;
  }

  .hero-promo-section {
    margin-bottom: 14px;
  }

  .promo-banner-card {
    padding: 14px 14px 12px;
    border-radius: 18px;
  }

  .promo-banner-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .promo-banner-middle {
    gap: 10px;
    align-items: center;
  }

  .promo-banner-title {
    font-size: 14.5px;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .promo-banner-desc {
    font-size: 11px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    opacity: 0.9;
  }

  .promo-visual-wrap {
    width: 64px;
    height: 64px;
    min-width: 64px;
  }

  /* Reduce background clutter and size of floating items on mobile for crystal clear text readability */
  .promo-floating-layer {
    opacity: 0.30;
  }
  .promo-floating-item {
    max-width: 30px !important;
    max-height: 30px !important;
  }
  .promo-floating-item img {
    max-width: 30px !important;
    max-height: 30px !important;
  }
  .promo-floating-item:nth-child(even) {
    display: none;
  }

  .promo-banner-bottom {
    margin-top: 4px;
  }

  .promo-bottom-row {
    gap: 6px;
    align-items: center;
    justify-content: space-between;
  }

  .promo-buttons-wrap {
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
  }

  .promo-action-btn {
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
    border-radius: 10px;
    gap: 4px;
    white-space: nowrap;
  }

  .promo-action-btn svg {
    width: 12px;
    height: 12px;
  }

  /* Dedicated compact sizing for 2-button slides (WinnerCraft) on mobile */
  .promo-buttons-wrap.is-multi-btn {
    gap: 5px;
  }
  .promo-buttons-wrap.is-multi-btn .promo-action-btn {
    height: 31px;
    padding: 0 10px;
    font-size: 11.5px;
    border-radius: 9px;
    gap: 3px;
  }
  .promo-buttons-wrap.is-multi-btn .promo-action-btn svg {
    width: 10px;
    height: 10px;
  }

  /* Compact navigation controls on mobile */
  .promo-nav-controls {
    padding: 2px 4px;
    border-radius: 16px;
    gap: 2px;
    flex-shrink: 0;
  }

  .promo-nav-arrow {
    width: 22px;
    height: 22px;
  }

  .promo-nav-arrow svg {
    width: 11px;
    height: 11px;
  }

  .promo-dots-wrap {
    gap: 3px;
    margin: 0 2px;
  }

  .promo-dot {
    width: 5px;
    height: 5px;
  }

  .promo-dot.active {
    width: 16px;
    height: 5px;
    border-radius: 3px;
  }
}

@media (max-width: 380px) {
  .promo-banner-card {
    padding: 12px 12px 10px;
  }
  .promo-banner-title {
    font-size: 13.5px;
  }
  .promo-banner-desc {
    font-size: 10.5px;
  }
  .promo-visual-wrap {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }
  .promo-floating-layer {
    opacity: 0.22;
  }
  .promo-floating-item {
    max-width: 22px !important;
    max-height: 22px !important;
  }
  .promo-floating-item img {
    max-width: 22px !important;
    max-height: 22px !important;
  }
  .promo-action-btn {
    padding: 0 10px;
    font-size: 11px;
    height: 32px;
  }
}

/* Desktop & Tablet Tweaks */
@media (min-width: 768px) {
  .promo-banner-card {
    padding: 18px 24px;
    border-radius: 22px;
  }
  
  .promo-banner-body {
    gap: 12px;
  }

  .promo-banner-topline {
    margin-bottom: 2px;
  }

  .promo-banner-middle {
    gap: 32px;
    align-items: center;
  }

  .promo-banner-text {
    max-width: 750px;
    gap: 4px;
  }

  .promo-banner-title {
    font-size: 17.5px;
    letter-spacing: -0.01em;
  }

  .promo-banner-desc {
    font-size: 13.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }

  .promo-visual-wrap {
    width: 120px;
    height: 120px;
    margin-right: 16px;
  }

  .promo-3d-img {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
  }

  [data-theme="light"] .promo-3d-img {
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.16));
  }

  .promo-banner-bottom {
    margin-top: 4px;
  }

  .promo-action-btn {
    width: auto;
    min-width: auto;
    height: 40px;
    padding: 0 20px;
    font-size: 13.5px;
    flex: 0 0 auto;
  }
}